CSS

word-break: keep-all;  /* 不换行 */

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

overflow: hidden;   /* 内容超出宽度时隐藏超出部分的内容 */

text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

与上述方法符合所需要的条件:1、可设置width(即内联或块)的元素;2、只对单行文本起作用。

浏览器兼容:IE/Firefox/Chrome/Opera等。

text-overflow:

clip 默认值。只需剪切内容而不显示用于表示文本溢出的省略号;

ellipsis 显示用于表示文本溢出的省略号 (...);

string 显示 string(而不是省略号)以指明剪切的文本 。--(注意:存在兼容问题!)

水平有限,文中错误不妥在所难免,欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢! 

原文地址:https://www.cnblogs.com/libinblog/p/4238781.html