css中的部分文字特性

文章目录

• 一、writing-mode
• 二、word-break
• 三、word-spacing;
• 四、white-space
• 五、省略

总结归纳常见文字特性，后续补充

一、writing-mode

• 默认horizontal-tb
• writing-mode: vertical-lr; 从第一排开始竖着排，到底部再换第二排，文字与文字之间从上至下，排与排之间从左到右
• writing-mode: vertical-rl; 和上面类似，文字依然是从上至下，不过排与排之间从右到左，类似于古籍中的书写方案

二、word-break

• 默认word-break: normal; 规定了每一行文字末尾换行的规则；CJK 指中文/日文/韩文，中日韩文字会默认换行，而英文等单词再长也不会换行（单词字母之间连续）
• word-break: break-all; 直接换行，意味着单词和整句可能被断开（包括英文），单词边界的换行被忽略，变成一个空格
• word-break: keep-all; 所有单词不换行，CJK字符也不再换行（也就是中文句子会被识别成一个连续单词）
• word-break: break-word; CJK默认换行，英文等单词也会换行；注意只是单个单词在末尾的换行规则，单词与单词之间，依然会导致换行

word-break: normal超长才换行

word-break: break-all都换行

word-break: break-word单词在末尾才换行，单词边界不变

三、word-spacing;

word-spacing: 1rem; 单词之间一般是空格，这个空格的间距大概是3px，这里可以自定义设置单词之间的距离

四、white-space

• 换行符指代源代码文本换行导致的换行符（查看浏览器element是看不到的）换行符会被显示未四个空格；
  指代换行元素
• white-space: normal; 处理字符中的空白字符，包括空格、换行符、制表符、回车符等（类似于正则中的\s），默认情况空格会被忽略，不会展示；正常情况下，元素宽度100px，文字内容超过100px会自动换行到第二行（单词边界、换行符），即便元素高度不足，文字也会超出元素之外，所以这种宽度超出导致的换行符，也归white-space管理；有prettier配置会消除多余空格，所以这个属性主要还是对是否换行的控制
• white-space: pre; 连续的空白符会被保留，只有换行符、
  会导致换行（单词换行、文字换行都不会生效，最终在一排展示）注意文本开头还有一个换行符
• white-space: pre-wrap;连续的空白符会被保留，换行符、
  • 默认换行规则
• white-space: pre-line; 连续的空白符会被合并（相当于展示的时候空格没有展示），换行符、
  • 默认换行规则

换行符，具体位置

空白符，具体位置

五、省略

• 单行快速省略

width: 100px; // 注意限制元素宽度，这样文本内容超出才会被overflow识别
overflow: hidden; // 导致overflow
text-overflow: ellipsis; // 文字被overflow后到展示效果，这里展示的是三个点
white-space: nowrap; // 强制为一行展示，换行符和默认规则换行都失效了