文本溢出:省略号不起作用,尽管使用了所有必要的 css 先决条件

Posted

技术标签:

【中文标题】文本溢出:省略号不起作用,尽管使用了所有必要的 css 先决条件【英文标题】:Text-overflow: ellipsis not working, despite using all necessary css prerequisites 【发布时间】:2015-05-14 22:01:38 【问题描述】:

我不明白为什么文本溢出省略号属性在这里不起作用...

html

<div class='overflowTest'>
   Long long long long long long text
</div>

还有 CSS:

.overflowTest 
   overflow: hidden; 
   white-space: no-wrap; 
   text-overflow: ellipsis; 
   background-color: red; 
   -webkit-border-radius: 12px; 
   -moz-border-radius: 12px; 
   border-radius: 12px; 
   margin:4px; 
   padding:4px; 
   width: 46%; 
   height:30px; 
   font-size: 12px; 
   padding-top:7px; 
   font-style: normal; 
   float: left; 

溢出设置为隐藏,空白设置为不换行,文本溢出设置为省略号,它还具有给定的宽度(尝试将其从百分比更改为固定数字,仍然不起作用),什么是我失踪了?

这里还有一个小提琴: https://jsfiddle.net/9xhrs2nj/

【问题讨论】:

【参考方案1】:

nowrap 中没有连字符。

Updated Example

应该是:

white-space: nowrap; 

而不是:

white-space: no-wrap; 

【讨论】:

@AdamBaranyai 我不这么认为。 CSS 中存在不一致。white-space 有一个连字符。inline-block 有一个连字符,但 nowrap 没有?您可以随时查看开发人员工具,以查看是否未应用某个属性/值。

以上是关于文本溢出:省略号不起作用,尽管使用了所有必要的 css 先决条件的主要内容,如果未能解决你的问题,请参考以下文章

文本溢出:省略号不起作用[重复]

CSS文本溢出省略号在Grid / Flex中不起作用

text-overflow:省略号在IE上不起作用

text-overflow文本溢出隐藏“...”显示

与flexbox结合使用的文本溢出不起作用[重复]

位置2并排流体/响应(未知宽度)