文本溢出省略号不适用于动态宽度

我有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

文本溢出省略号不适用于动态宽度

回答

相关问题