css中的部分文字特性

文章目录

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

一、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; 连续的空白符会被合并(相当于展示的时候空格没有展示),换行符、
    • 默认换行规则

换行符,具体位置

空白符,具体位置

五、省略

  • 单行快速省略
javascript 复制代码
width: 100px; // 注意限制元素宽度,这样文本内容超出才会被overflow识别
overflow: hidden; // 导致overflow
text-overflow: ellipsis; // 文字被overflow后到展示效果,这里展示的是三个点
white-space: nowrap; // 强制为一行展示,换行符和默认规则换行都失效了
相关推荐
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
fakaifa1 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
木木黄木木2 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言2 小时前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家2 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya2 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me2 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__3 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭3 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟3 小时前
Combine知识点switchToLatest
前端