文字超出该有的宽度呈现~省略号

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文字超出该有的宽度呈现~省略号相关的知识,希望对你有一定的参考价值。

代码:

p{

    width: 50px;  /*必须设置宽度*/

    overflow: hidden;  /*溢出隐藏*/

    text-overflow: ellipsis; /*以省略号...显示*/

    white-space: nowrap;  /*强制不换行*/

}

这几个缺一不可。

1.text-overflow:ellipsis | clip

ellipsis:出现省略号;
clip:不出现省略号

2.white-space:nowrap | pre-wrap | pre-line

 nowrap:即使文字超出宽度,也不让文字换行

  pre-wrap:保留空白符序列,但是正常地进行换行

 pre-line:合并空白符序列,但是保留换行符

以上是关于文字超出该有的宽度呈现~省略号的主要内容,如果未能解决你的问题,请参考以下文章

设置文本超出既定宽度隐藏,并显示省略号

文本超出---单行省略和多行省略

table表格中文字超出显示省略号

css文字单行/多行超出显示省略号...

文字超出省略号

div内容超出宽度时如何隐藏?如何显示省略标记?