本文主要是介绍css样式：文字多变省略号，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一下三行代码：
//以下三行代码是文字太多变三行overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
1、单行文本
使用text-overflow：ellipsis属性
text-overflow: clip|ellipsis|string;
clip：修剪文本。
ellipsis：显示省略符号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。
示例：
css:
p{
overflow: hidden;/超出部分隐藏/
text-overflow:ellipsis;/* 超出部分显示省略号 */
white-space: nowrap;/*规定段落中的文本不进行换行 */
width: 250px;/需要配合宽度来使用/
border: 1px solid red;
font-size: 30px;
}
html:
单行文本超出部分显示省略号我是mdzz
2、多行文本显示省略号，省略号在段尾
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
width: 250px;
border: 1px solid red;
font-size: 30px;
}
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
这篇关于css样式：文字多变省略号的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
