文本设置省略号

最新推荐文章于 2023-12-20 16:32:42 发布

44w0

最新推荐文章于 2023-12-20 16:32:42 发布

阅读量700

点赞数 1

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_30136729/article/details/123777388

版权

1.显示单行，多余文本隐藏显示省略号：

.box{
	width:200px;
	overflow:hidden; //多于文本隐藏
	text-overflow:ellipisis; //显示省略号
	white-space:nowrap; //文本不换行
}

多行文本溢出控制最后一行显示显示省略号

基于行数控制

{
  width:200px;
  overflow:hidden;
  text-overflow:ellipisis;
  display:-webkit-box; //设置为弹性伸缩盒子模型
  -webkit-line-clamp:2; //设置显示行数
  -webkit-box-orint:vertical; //设置伸缩盒子的子元素排序方式
}

基于高度控制

.demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
}
.demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }