名称 des
tab-size
text-transform 控制大小写。 capitalize:首字母大写; uppercase:转大写; lowercase:转小写
换行相关 des
white-space 元素内的空白怎样处理。normal ;pre ;nowrap ;pre-wrap ;pre-line;inherit ;
word-break 指定非CJK脚本的断行规则。注:CJK脚本是中国,日本和韩国(”中日韩”)脚本。normal:浏览器默认;break-all:单词碰到边界一律拆分换行;keep-all只有空格、-、半角处可以触发自动换行
word-wrap 允许长单词或 URL 地址换行到下一行。normal: 只在允许的断字点换行。break-word: 在长单词或 URL 地址内部进行换行。
overflow-wrap css3将 <’ word-wrap ‘> 改名为 <’ overflow-wrap ‘>;适用于所有元素
文本属性相关 des
text-align
text-align-last 如何对齐文本的最后一行。只有在 text-align 属性为”justify” 时才起作用。(不支持safari)
text-justify 略. 大多数浏览器不支持
word-spacing 单词间距
letter-spacing 字母间距
text-indent 文本块首行缩进
vertical-align 指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。MDN效果一览
inline-height 用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。
text-size-adjust 检索或设置移动端页面中对象文本的大小调整
文本装饰相关 des
text-decoration none ; underline:下划线 ; overline 上划线; line-through 中划线;blink闪烁; inherit继承
text-shadow 阴影

text-transform

p.capitalize

p.uppercase

p.lowercase

white-space

  • normal: 为默认值
    • 连续的空格会合并为1个
    • nbsp;</br>正常发挥作用。
    • 换行符(回车)无效
    • 句子超过一行后会自动换行,而长度超过一行的单个单词会超出边界。
    • 中文不会超出边界
  • nowrap: 比较简单,不换行。
    • 连续的空格会合并为1个
    • nbsp;</br>正常发挥作用。
    • 不自动换行
    • 换行符(回车)无效
  • pre: preserve保留
    • 空格和回车生效
    • 没有自动换行
  • pre-wrap: pre基础上支持了换行
  • pre-line: 可以理解为只保留了换行符(回车)换行,其他和默认时一样。 特征:空格合并、换行符生效、支持自动换行
<div class="white-space-default">
  Hi&nbsp;&nbsp;,
  This   is a incomprehensibilities long word.
  </br>
  你好&nbsp;&nbsp;,
  百度诉字节跳动  不正当竞争窃取搜索结果索赔9000万
</div>
(默认normal)Hi  , This is a incomprehensibilities long word.
你好  , 百度诉字节跳动 不正当竞争窃取搜索结果索赔9000万
(nowrap)Hi  , This is a incomprehensibilities long word.
你好  , 百度诉字节跳动 不正当竞争窃取搜索结果索赔9000万
(pre-wrap)Hi  , This is a incomprehensibilities long word.
你好  , 百度诉字节跳动 不正当竞争窃取搜索结果索赔9000万
(pre-line)Hi  , This is a incomprehensibilities long word.
你好  , 百度诉字节跳动 不正当竞争窃取搜索结果索赔9000万
(pre)Hi  , This is a incomprehensibilities long word.
你好  , 百度诉字节跳动 不正当竞争窃取搜索结果索赔9000万

word-break

(normal)incomprehensibilities
中文字符 测试中文字符测试中文字符
(break-all)incomprehensibilities
中文字符 测试中文字符测试中文字符
(keep-all)incomprehensibilities
中文字符 测试中文字符测试中文字符

参考资料 https://juejin.im/post/5b8905456fb9a01a105966b4