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; // 强制为一行展示,换行符和默认规则换行都失效了
相关推荐
软件技术NINI39 分钟前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_92 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front2 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie2 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀2 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻2 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔3 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04123 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj503 小时前
前端基础之《React(1)—webpack简介》
前端·react