属性
word-break
- 作用:指定非CJK(中日韩)文本的断行规则。(对中文也会有影响)
取值:
值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 - keep-all对英文和normal相同。
- keep-all会影响中文,导致中文遇到标点符号就换行,没遇到就超出容器。
浏览器兼容性:主流浏览器都支持
overflow-wrap(word-wrap)
- 作用:当word-break不为break-all时,取值break-word可以让一行放不下的单词断行。
取值:
值 描述 normal 只在允许的断字点换行(浏览器保持默认处理)。 break-word 在长单词或 URL 地址内部进行换行。 浏览器兼容性:
overflow-wrap: 为word-wrap在css3标准中名字。在chrome和opera中支持。微软的浏览器不支持。 word-wrap: 为微软私有的名字,但基本所有浏览器都支持。
white-space
- 作用:设置如何处理元素内的空白
- 不仅仅处理文本空白。也处理div等里面的空白。
- 注意空白包括空格和空行。
取值:
值 描述 normal 默认。空白会被浏览器忽略。(多个空格保留了一个(要实现多个空格用 ),空行删除) pre 空白会被浏览器保留,且不会断行,其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会断行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit(IE不支持) 规定应该从父元素继承 white-space 属性的值。 浏览器兼容性:所有浏览器都支持。
text-overflow
- 作用:规定当文本溢出包含元素时发生的事情。
取值:
值 描述 clip(默认值) 修剪文本 ellipsis 显示省略符号来代表被修剪的文本。 任意string(只在 Firefox 浏览器下有效) 使用给定的字符串来代表被修剪的文本。
text-wrap(目前主流浏览器都不支持)
应用
一般断行需求
注意区分断行和换行,断行一行放不下时浏览器自动放到下一行(控制权在浏览器),换行为使用br标签主动放到下一行(控制权在编码人)。
- 中文:按字断行
英文(包括数字):
- 按词断行,一个词一行剩余的空间放不下,则空出来放下一行。
- 若下一整行也放不下,则放不下的词中的字放下一行(按字断行)
浏览器一般默认实现了中文和英文的第一点,而在一个词一整行也放不下时,浏览器默认会让文本超出容器显示。
只需加上overflow-wrap:break-word
即可实现英文第二点。 实现文本不换行,以省略号表示超出的部分
overflow: hidden; white-space: nowrap; text-overflow:ellipsis;
效果如下: