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; // 强制为一行展示,换行符和默认规则换行都失效了
相关推荐
2301_1472583692 分钟前
7月1日作业
java·前端·算法
汪子熙4 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨
前端
MiyueFE36 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子40 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游2 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构