百度显示网站名,网站管理过程,网站后台公告id修改,网站建设的方向和任务文章目录 一、writing-mode二、word-break三、word-spacing;四、white-space五、省略 总结归纳常见文字特性#xff0c;后续补充 一、writing-mode 默认horizontal-tbwriting-mode: vertical-lr; 从第一排开始竖着排#xff0c;到底部再换第二排#xff0c;文字与文字之间从… 文章目录 一、writing-mode二、word-break三、word-spacing;四、white-space五、省略 总结归纳常见文字特性后续补充 一、writing-mode 默认horizontal-tbwriting-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; // 强制为一行展示换行符和默认规则换行都失效了
