css实现超出部分显示省略号,css实现字母自动折行
程序员文章站
2022-06-08 09:15:46
...
css实现超出部分显示省略号
显示一行,省略号
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
/* 不换行,超出部分隐藏且以省略号形式出现*/
显示两行,省略号
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
css实现字母自动折行
加上如下的CSS设置,设定好宽度width,然后设置合适的word-wrap和word-break属性:
.breakAll{
white-space:normal;
word-break:keep-all;
word-wrap: break-word;
}
word-break 语法
属性设置如何处理单词折断,仅支持IE
word-break : normal | break-all | keep-all
参数:
- normal : 依照亚洲语言和非亚洲语言的文本规则,允许在
字内换行
- break-all :该行为与
亚洲
语言的normal相同。也允许非亚洲语言文本行的任意字内断开
。该值适合包含一些非亚洲文本的亚洲文本。只对英文起作用,以字母作为换行依据 - keep-all :与所有
非亚洲
语言的normal相同。对于中文,韩文,日文,不允许字断开
。适合包含少量亚洲文本的非亚洲文本。完整英文单词换行
white-space语法
属性设置如何处理元素内的空白,文本进行换行
white-space: normal | nowarp | pre | pre-line | pre-warp | inherit
参数:
-
normal
默认。空白会被浏览器忽略。 -
pre
空白会被浏览器保留。其行为方式类似 HTML 中的<pre>
标签。 -
nowrap
文本不会换行,文本会在在同一行上继续,直到遇到<br>
标签为止。强制不换行,都起作用。 -
pre-wrap
保留空白符序列,但是正常地进行换行。只对中文起作用,强制换行 -
pre-line
合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
word-wrap 属性
word-wrap属性允许长的内容可以自动换行。
word-wrap: normal|break-word;
参数:
-
normal
只在允许的断字点换行(浏览器保持默认处理)。 -
break-word
在长单词或 URL 地址内部进行换行。只对英文起作用,以单词作为换行依据
上一篇: linux网络配置工具的使用
下一篇: 如何有效减肥 保持身材的饮食诀窍
推荐阅读
-
CSS实现不换行/自动换行/文本超出隐藏显示省略号
-
html div内第二行文字显示不下的时候才用省略号代替 css实现
-
css实现超出部分显示省略号,css实现字母自动折行
-
使用CSS如何实现截取标题并用省略号表示超出部分_html/css_WEB-ITnose
-
CSS实现文字一行显示带省略号_html/css_WEB-ITnose
-
html + CSS实现文字超出长度隐藏,显示省略号_html/css_WEB-ITnose
-
CSS实现文字一行显示带省略号_html/css_WEB-ITnose
-
CSS实现单行、多行文本超出部分显示省略号
-
换行并且在某行实现超出div显示省略号。_html/css_WEB-ITnose
-
html + CSS实现文字超出长度隐藏,显示省略号_html/css_WEB-ITnose