文本溢出text-overflow:ellipsis不生效怎么办?

文本溢出text-overflow:ellipsis不生效怎么办?

文本溢出内容截取无效怎么办

有时候,一个细小的写法都会导致我们想要的样式效果无法实现,这时候,就该找找原因是怎么回事了。

比如,文本溢出text-overflow:ellipsis不生效怎么办?

文本溢出text-overflow:ellipsis不生效怎么办?

按照text-overflow: ellipsis;使用规则书写后,标签样式并未生效,例如:

.txts {width:5rem;text-overflow:ellipsis;overflow:hidden;} 

<div class="txts">一个细小的写法都会导致我们想要的样式效果无法实现,这时候,就该找找原因</div>

这时候理应显示为:

<div class="txts">一个细小的写法都会导致...</div>

然而,它依然是完整显示为:

<div class="txts">一个细小的写法都会导致我们想要的样式效果无法实现,这时候,就该找找原因</div>

文本溢出text-overflow:ellipsis不生效怎么办?原因在哪里呢?

其实还需要另外增加1个CSS属性支持:

.txts{width:5rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} 

white-space:nowrap非常重要,它是决定了省略号是否出现的关键,加上它,这时候才会显示为:

<div class="txts">一个细小的写法都会导致...</div>

我们必须知道,white-space是设置文本不换行,overflow设置标签超出部分自动隐藏。


不过,该CSS属性在某些浏览器上不生效,如果不需要照顾不兼容的浏览器,比如IE,可以放心大胆使用。

下载文档
《文本溢出text-overflow:ellipsis不生效怎么办?.doc》
头条奇闻微信公众号:奇闻有趣
关注头条奇闻公众号,订阅更多头条奇闻