css超出部分省略（单行、多行，多种方法实现）

本文主要是介绍css超出部分省略（单行、多行，多种方法实现），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML

<p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p>

1.单行

.text{width: 200px;border: 1px solid #000000;white-space: nowrap;   /* 控制元素不换行 */overflow: hidden;      /* p标签超出部分隐藏*/text-overflow: ellipsis;   /* 文本超出部分为省略号 */
}

2.多行

• 使用display: -webkit-box;

• 优点:简洁明了

• 缺点:使用了私有属性

.text{display: -webkit-box;-webkit-box-orient: vertical;/* 子元素排列垂直排列 */-webkit-line-clamp: 3;/* 设置从第几行后开始省略 */height: 60px;width: 200px;border: 1px solid #000000;overflow: hidden;
}		

这篇关于css超出部分省略（单行、多行，多种方法实现）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---