如何使用CSS溢出：隱藏，以避免父容器增長

Question

我有一個固定寬度列和一個流體列。在流體列內部，我想用一個nowrap放一個字符串，並且不要在容器外面顯示文本。 這是我如何查看全文：

---------------------------------------------------------- 
|  |            | 
| 200px | fluid width div fluid width div fluid width ...| 
|  |            | 
---------------------------------------------------------- 

但是當文本太長的div容器的增長和顯示所有文字，不管文字有多長。

這是我的示例代碼：http://jsfiddle.net/Autociudad/8137gf7g/4/

HTML代碼：

<div class="table-layout"> 
    <div class="table-cell fixed-width-200"> 
     <p>fixed width div</p> 
    </div> 
    <div class="table-cell"> 
     <p class="text">fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div </p>  
    </div> 
</div> 

CSS代碼：

.text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.table-layout { 
    display:table; 
    width:100%; 
} 
.table-layout .table-cell { 
    display:table-cell; 
    border:solid 1px #ccc; 
} 

.fixed-width-200 { 
    width:200px; 
} 

感謝。

Answer 1

我相信你的問題是由於添加到display:table包裝元素和display:table-cell的「細胞」。

或者您可以使用一個float:left爲200像素寬度的細胞和刪除自定義display設置：http://jsfiddle.net/8137gf7g/7/

.text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.table-layout { 
    width:100%; 
} 
.table-layout .table-cell { 
    border:solid 1px #ccc; 
} 

.fixed-width-200 { 
    float:left; 
    width:200px; 
} 

Answer 2

你需要這樣它才能知道該寬度應啓動後隱藏的內容上.text設置明確的寬度（即如何做計算）：

.text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width:100px; 
} 

的white-space:nowrap是防止它從正常流體行爲。

http://jsfiddle.net/8137gf7g/5/

Answer 3

一切都是完美只需要設置爲

.text 
{ 
display: inline-block; 
width: 300px; 
white-space: nowrap; 
}