文本溢出省略號不適用於動態寬度

我有3個嵌套div。家長，孩子和孩子的孩子。

我想完成什麼（動機是不相關的）是那個孩子根據父母的寬度（一個百分比）獲得一個相對寬度，並且子女的孩子必須根據這個寬度有一個溢出省略號。問題是，如果我在兒童寬度中使用％，則省略號不起作用，並且如果我在pixeles中定義寬度，它將起作用。

下面是HTML

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div>

這裏的非工作CSS

.a { 
     border:black 1px solid; 
     float: left; 
     width: 122px; 
     display: table; 
     line-height: 14px; 
    } 
    .b { 
     width:100%; 
     color: black; 
     font-size: 14px; 
     text-transform: uppercase; 
     cursor: pointer; 
    } 
    .c { 
     line-height: 11px; 
     width: 100%; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space:nowrap; 
    }

但是如果我改變B的寬度爲122px它可以完美運行（注意122px應爲100％）。

您可以點擊此處查看：http://jsfiddle.net/vNRpw/4/

謝謝！

來源

2013-05-08 Dan Stern

不必要的downvote。如果我更新了答案，每個人都會知道它已經解決了，所以沒人會浪費時間。這會讓我有時間回答這個問題。此外，我不能標記我自己的答案接受兩天後。無論如何，感謝您的建議 – 2013-05-08 01:59:44

在第一個div中有display: table;這對省略號造成了麻煩。如果你刪除這個，那麼省略號工作正常。

我不會刪除的問題，它可以幫助別人

檢查它在這裏工作：http://jsfiddle.net/vNRpw/6/

來源

2013-05-08 01:57:53

這個規則在我的代碼中導致了很多省略號的問題。起初，它看起來像省略號的作品，直到我調整了DIV。採取顯示：表完美地工作。謝謝！ – Bildonia 2014-04-28 21:38:35

我顯示在一行中，而不會去DIV的下一行http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge 2014-10-13 15:47:16

我在側面添加省略號Bootstrap的'input-group'具有'display：table'。除了刪除'display：table'，還有其他解決方法嗎？ *更新*：它轉向另一個問題：http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell – 2015-01-26 06:08:54

什麼是這樣的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.a { 
    border:black 1px solid; 
    float: left; 
    width: 50%; 
    line-height: 14px; 
} 
.b { 
    width:100%; 
    color: black; 
    font-size: 14px; 
    text-transform: uppercase; 
    cursor: pointer; 
} 
.c { 
    line-height: 11px; 
    width: 98%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space:nowrap; 
} 

</style> 

</head> 
<body> 

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div> 

</body> 
</html>

主要的變化是把一個寬度略小於100％.c。

來源

2013-05-08 01:53:31

礦在一行中，並顯示橢圓。 http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge 2014-10-13 15:46:28

文本溢出省略號不適用於動態寬度

回答

相關問題