text-overflow：省略号css属性在firefox中不起作用，stackoverflow上的prev解决方案也无法正常工作

Question

我已经使用过bootstrap媒体类，我想在新行中打破我的标题和描述（如果它超过宽度则钳位并放置省略号），我已经使用了以下css属性和

标签但它没有工作，即

white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;

标题溢出div，我只想通过应用上面的css来适应它的宽度。它在铬中工作正常。但不是在Firefox中。

Answer 1

根据this thread, 确保您的文字受到约束，方法是将该元素或其父元素设为display:block或display:inline-block，并设置{{ 1}}或width设置（不在max-width中）。

您可以在该页面上尝试其他一些方法。

Answer 2

只需在内部DIV上设置以下定义：

text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
width: 100%;

• “width”可以是您需要的任何内容，只要它是确定的（px或％）。否则，“省略号”效果将不起作用，因为浏览器不知道容器“结束”的位置以及内容从此时开始溢出。