一行
overflow:hidden; //文本超出隐藏
text-overflow:ellipsis; //文本超出用...显示
white-space:nowrap; //超出不换行
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
以上多行自动换行只支持webkit浏览器, 更加兼容的方式如下
利用 height 和 line-height 控制文本行数
用伪元素before来实现 ... 如果文本没有超出限制则用after来遮挡住 ... (不会挡住文字可以看下position)
word-wrap: break-word; 强制换行,不会中断英文单词 word-break: break-all; 强制换行,会强行中断英文单词 两者都对行内元素无效所以要加上display: block;
.text{
width: 100px;
height: 40px;
line-height: 20px;
background-color: #f2f2f2;
display: block;
position: relative;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
.text:before{
content: '...';
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
width: 24px;
padding-left: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #f2f2f2;
}
.text:after{
content: '';
display: inline-block;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background-color: #f2f2f2;
}