先看代码:
单行文本溢出显示省略号
overflow: hidden; /* 超出隐藏 */
word-break: break-all; /* 不换行 */
white-space: nowrap; /* 处理元素中的空白 */
text-overflow:ellipsis; /* 最关键的就是text-overflow: ellipsis */
多行文本溢出显示省略号
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: nowrap;
word-break: break-all;
display: -webkit-box
-
-webkit-box-orient: vertical;
子元素排列方式, 垂直 -
-webkit-line-clamp
限制行数 -
word-break: break-all;
非必须, 优化换行, 不会中文几个字就换行了
除了上述直接用原生支持的方式外也可以用偷巧的方式来进行处理
比如下面的方法意思是, 我画个图吧, 可以看下
设置line-height和height要倍数关系
, 比如要显示两行就height是line-height的两倍, 最好用rem来定大小
.block {
width: 150px;
line-height: 1em;
height: 2em;
position: relative;
background-color: #f96868;
overflow: hidden;
word-break: break-all;
}
.block::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background: #f96868 repeat-y;
}