换行,不换行,超出显示省略号

强制换行

word-wrap:break-word;   (单词换行)

word-break:break-all;      (单个字符换行)

强制不换行

white-space:nowrap;

单行文字超出显示省略号(注意:配合宽度)

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

多行文本超出显示省略号

display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;

显示省略号的兼容写法(这种写法简单兼容性能好,缺点是有底色,如果有字少的情况省略号还是存在)

.text { 500px;word-break: break-all;height: 44px;position: relative;line-height: 21px;}
.text:after{content: '...';position: absolute;bottom: 4px;right: 0;background: #fff;}

单行兼容写法
.slh{
  160px;height:50px;line-height:25px;border:4px solid #eee;   white-space:nowrap;/*强制文本在一行内显示*/   text-overflow:ellipsis; /*溢出省略号,支持ie、safari(webkit)*/ -o-text-overflow:ellipsis; /*溢出省略号,支持opera*/ overflow:hidden;/*溢出隐藏*/ -moz-binding:url('ellipsis.xml#ellipsis');/*溢出省略号,支持firefox*/
}
原文地址:https://www.cnblogs.com/xiaohaha668/p/10623041.html