目录
<div class="title">
<span>第八批在韩志愿军烈士安葬仪式</span>
</div>
-
在文字后面加省略号
一行内多余的文字不显示:
.title {
width: 100px;
overflow:hidden;
white-space:nowrap;
text-overflow:clip;
-o-text-overflow:clip;
}
一行内多余的文字以省略号显示:
.title {
width: 100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
如果不是一行,而是多行,则把white-space:nowrap;改为display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
比如:2行内多余的文字以省略号显示
.title {
width: 100px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 这里设定行数 */
-webkit-box-orient: vertical;
}
-
在文字前面加省略号
加上
direction: rtl;