在设置标题或者内容介绍时候,总有超过限制的长度,如何使用css3来控制缩略?
如何使用CSS控制超过一行自动显示省略号?
1 个回答
单行缩略:
<style>
.overflow {
width: 300px;
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/*超出部分文字以...显示*/
display: -webkit-box;
white-space: nowrap;/*不换行*/
/*! autoprefixer: off */
-webkit-box-orient: vertical;
}
</style>
多行缩略:
<style>
.overflow {
width: 300px;
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/*超出部分文字以...显示*/
display: -webkit-box;
-webkit-line-clamp: 3;/*限制行数,如果单行缩略即为1*/
/*! autoprefixer: off */
-webkit-box-orient: vertical;
}
</style>