900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css内容超过宽度显示省略号没效果 文字超过两行折叠省略

css内容超过宽度显示省略号没效果 文字超过两行折叠省略

时间:2023-03-29 01:47:44

相关推荐

css内容超过宽度显示省略号没效果 文字超过两行折叠省略

实现代码

overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行

没效果解决方案:放置文字的元素使用块级元素 例如p,div,不要使用span等行内元素。

例:

// css.text{width: 50px;overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行}// html <p class="text">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

文字超过两行及以上折叠省略

overflow:hidden;display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;text-overflow:ellipsis;//溢出部分用省略号代替-webkit-line-clamp:2; //设置文本显示两行-webkit-box-orient:vertical; //从上到下排列子元素;white-space:normal;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。