文本溢出:省略号不起作用,尽管使用了所有必要的 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 先决条件的主要内容,如果未能解决你的问题,请参考以下文章