CSS笔记使文字在一行显示,超出部分用省略号显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS笔记使文字在一行显示,超出部分用省略号显示相关的知识,希望对你有一定的参考价值。

CSS代码:

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

说明:

text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出。

white-space:nowrap;强制文本在一行内显示。

overflow:hidden;溢出内容为隐藏。

必须三者同时用的时候才会实现溢出文本显示省略号

附:多行显示的方法:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//设置显示几行
-webkit-box-orient: vertical;

以上是关于CSS笔记使文字在一行显示,超出部分用省略号显示的主要内容,如果未能解决你的问题,请参考以下文章

css 实现div内一行显示,超出部分用省略号代替,css 实现div内显示两行或三行,超出部分用省略号显示

div+css怎么显示两行或三行文字,然后多出的部分省略号代替??

文字超出两行用省略号显示

css让文字超出部分用省略号三个点显示的方法案例

div内多行文字, 溢出部分用省略号显示

Vue uniapp 文字超出几行显示省略号...,显示更多按钮