如何防止元素掉落？

Question

我有一個div兩個元素，一個按鈕和一個跨度：

<div class="outer"> 
    <button>Perform Action</button> 
    <span class="option">View Some Stuff</span> 
</div> 

對於我申請的是告訴它使一個省略號規則跨度：

div.outer { 
    width: 50%; 
    border: 2px dotted navy; 
} 

span.option { 
    border: 2px solid red; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

我已經刻意使出格50％的寬度，所以很容易複製我在說什麼。我已將此代碼放入this fiddle。如何使它跨度不會跳下來，而是形成省略號？

Answer 1

JSFiddle。

span.option { 
    border: 2px solid red; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    display:inline-block; 
    width:200px; 
} 

你需要將其設置爲inline-block或block，否則span不斷增加。如果您覺得合適，您可以刪除或編輯width。

Answer 2

button { 
    display: block; 
    float: left; 
} 
span.option { 
    border: 2px solid red; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    display: block; 
} 

Answer 3

span.option沒有任何省略號，因爲它有空間可以成長。其容器的寬度爲可用空間的50％。

span.option需要有一個寬度比內容更小，它也需要一個塊級元素

div.outer { border: 2px dotted navy; 
       display:inline-block; 
       width: 50%;} 
span.option { border: 2px solid red; 
       text-overflow: ellipsis; 
       white-space: nowrap; 
      overflow: hidden; 
       display:inline-block; 
       width: 70px; }