CSS 应用: 文本溢出省略效果(单行/多行)
前言
本篇主要介绍一个在 css 中还挺常见的文本溢出省略效果,也就是指定行数之后就会在最后一行最后变成删节号表示有更多文本。
正文
使用属性介绍
首先我们介绍几个待会会用到的 css 属性
-
overflow
MDN reference主要处理任何内容在块元素中溢出时效果,常见的值有
overflow: visible
:显示溢出内容overflow: hidden
:隐藏溢出内容overflow: scroll
:滚动条overflow: auto
:有需要自动出现滚动条
-
white-space
MDN reference空白内容在元素中的处理机制,包括连续空白的合并、换行符、<br/> 元素的处理
-
word-break
MDN reference指定换行时文本断开的机制,尤其在处理长英文单词时需要特别处理
-
text-overflow
MDN reference指定文本溢出时的效果,与 overflow 不同的是,text-overflow 只关心文本,也就是提供文本删节号的核心属性
接下来直接看例子
1. 单行文本溢出
.single-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
单行文本溢出很简单,text-overflow: ellipsis
给出溢出时的删节号;white-space: nowrap
指定文本不换行。
2. 多行文本溢出
.multiple-line {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
多行文本唯一不同的是,使用 display: -webkit-box
指定为特殊的块元素,-webkit-box-orient: vertical
指定文本排列交错轴方向,最后 -webkit-line-clamp: 3
指定最大文本高度同时自带 text-overflow: ellipsis
的效果。
效果如下
结语
文本换行是一个挺常见的需求,供大家参考
其他资源
参考连接
Title | Link |
---|---|
overflow - MDN | https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow |
white-space - MDN | https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space |
word-break - MDN | https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break |
text-overflow - MDN | https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow |
CSS 实现文本的单行和多行溢出省略效 #130 | https://github.com/sisterAn/JavaScript-Algorithms/issues/130 |