搬瓦工 做网站,jsp借书网站开发,做的网站为什么图片看不了怎么回事,张家港设计公司在 CSS 中#xff0c;可以使用 text-overflow: ellipsis; 属性来实现文本溢出时自动省略号的效果。但是该属性只能用于单行文本溢出的情况#xff0c;对于多行文本溢出的情况#xff0c;需要使用一定的技巧才能实现相应的效果。下面将分别介绍单行和多行文本溢出时的实现方法…在 CSS 中可以使用 text-overflow: ellipsis; 属性来实现文本溢出时自动省略号的效果。但是该属性只能用于单行文本溢出的情况对于多行文本溢出的情况需要使用一定的技巧才能实现相应的效果。下面将分别介绍单行和多行文本溢出时的实现方法。
单行文本溢出省略号
HTML 代码
p classsingle-line-ellipsis这是一个超长的单行文本用于测试省略号效果。
/pCSS 代码
.single-line-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}解释
overflow: hidden; 表示超出部分不可见。text-overflow: ellipsis; 表示文本溢出时显示省略号。white-space: nowrap; 表示文本不换行这样才能实现完整的溢出效果。
多行文本溢出省略号
实现多行文本省略号的方法有很多种这里介绍其中一种方法。该方法需要使用 -webkit-line-clamp 属性该属性只对 WebKit 浏览器有效和 -webkit-box-orient 属性。
HTML 代码
p classmulti-line-ellipsis这是一个超长的多行文本用于测试省略号效果。这是一个超长的多行文本用于测试省略号效果。这是一个超长的多行文本用于测试省略号效果。
/pCSS 代码
.multi-line-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}解释
display: -webkit-box; 表示将文本框设置为弹性盒子可以参考 flexbox 的相关知识。-webkit-box-orient: vertical; 表示弹性盒子的排列方向为垂直方向。-webkit-line-clamp: 3; 表示最多显示 3 行超出部分会被省略号代替。overflow: hidden; 表示超出部分不可见。text-overflow: ellipsis; 表示文本溢出时显示省略号。
注意事项
-webkit-line-clamp 属性只对 WebKit 浏览器有效对其他浏览器没有作用。弹性盒子的相关知识可以参考 flexbox。
