1）单行文本溢出隐藏

核心css语句：

1、overflow：hidden; （超出设置的宽度就隐藏内容）

2、white-space：nowrap; （设置文字在一行显示不能换行）

3、text-overflow：ellipsis;（设置当文本溢出时显示省略符号来代表被剪去的文本）

设置ul宽度为200，超出的文字内容让其自动隐藏并显示.........

css部分：

ul{

width：200px;

padding：10px;

border：1px solid #ccc;

}

li{

overflow：hidden;

text-overflow：ellipsis;

white-space：nowrap;

}

html部分：

<ul>

<li>单行文本溢出显示省略号单行文本溢出显示省略号</li>

<li>单行文本溢出显示省略号单行文本溢出显示省略号</li>

<li>单行文本溢出显示省略号单行文本溢出显示省略号</li>

</ul>

2）多行溢出隐藏

核心css语句：

1、-webkit-line-clamp：2; （限制在一个块元素内显示的文本的行数，2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性）

2、display： -webkit-box；（和1结合使用，将对象作为弹性伸缩盒子模型显示） 

3、-webkit-box-orient：vertical；（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 。）

4、overflow：hidden；（超出设置的宽度就隐藏内容）

5、text-overflow: ellipsis;（设置当文本溢出时显示省略符号来代表被剪去的文本）

设置div宽度为200，超出的文字内容让其自动隐藏并显示.........

css部分：

div{

width：200px;

padding：10px;

border：1px solid #ccc;

}

p{

display： -webkit-box;

-webkit-box-orient： vertical;

-webkit-line-clamp： 2;

overflow：hidden;

text-overflow：ellipsis;

}

html部分：

<div>

<p>多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号</p>

</div>

远近互联前端小王整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。