CSS 为 html 标记语言提供了一种样式描述, 定义了其中元素的显示方式. 下面我们来看一下 CSS 如何设置文本超出几行显示省略号.
CSS 设置超出几行显示省略号:
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:
<p > 单行文本超出部分显示省略号我是 mdzz</p>
效果图:
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 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14044.html