CSS: 文字内容换行问题总结

  • 1. 自动换行(强制换行):`word-break:break-all;`
  • 2. 根据换行点换行:`word-wrap:break-word;`
  • 3. `word-break:break-all`和`word-wrap:break-word`的区别
  • 4. 单行文字超出显示省略号
  • 4.1 `white-space`:设置如何处理元素内的空白
  • 4.2 `text-overflow`:规定当 "文本" 溢出包含元素时发生的事情
  • 4.3 `overflow`:规定当 "内容" 溢出元素框时发生的事情
  • 5. 多行文字超出显示省略号


1. 自动换行(强制换行):word-break:break-all;


描述

normal

使用浏览器默认的换行规则。

break-all

允许在单词内换行。

keep-all

只能在半角空格或连字符处换行。

2. 根据换行点换行:word-wrap:break-word;


描述

normal

只在允许的断字点换行(浏览器保持默认处理)。

break-word

在长单词或 URL 地址内部进行换行。

3. word-break:break-allword-wrap:break-word的区别

一张图说明:

css语句判断是安卓还是ios_css


更详细的戳:word-break:break-all和word-wrap:break-word的区别

4. 单行文字超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

4.1 white-space:设置如何处理元素内的空白

使文字不换行:white-space: nowrap;


描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值(所有的IE浏览器都不支持此属性)。

4.2 text-overflow:规定当 “文本” 溢出包含元素时发生的事情

显示省略号:text-overflow: ellipsis;


描述

clip

默认。修剪文本。

ellipsis

显示省略符号来代表被修剪的文本。

string

使用给定的字符串来代表被修剪的文本。

4.3 overflow:规定当 “内容” 溢出元素框时发生的事情

裁剪内容并使其不可见:overflow: hidden;


描述

visible

默认。内容不会被裁剪,会显示在元素框之外。

hidden

内容会被裁剪,并且其余部分是不可见的。

scroll

内容会被裁剪,但浏览器会显示滚动条以便查看其余内容(有人认为鸡肋,从来没有使用过)。

auto

如果内容被裁剪,则浏览器会显示滚动条以便查看其余内容。

inherit

规定应该从父元素继承overflow属性的值。

5. 多行文字超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;