当前位置: 首页 > news >正文

[CSS] 文本折行

文本折行一般分为两种情况:
CJK(Chinese/Japanese/Korean) 字符和非 CJK 字符。一般非 CJK 字符折行发生在两个单词的空格中间,见下图:
在这里插入图片描述
图中文本 “hello world” 包裹容器的宽度为 2rem,但是 hello 并没有被截取成两段,反而是在空格处发生了折行。这种行为也很容易理解——把一个单词拆成两部分,很可能会使单词失去意义,所以只能在空格折行。

CJK 字符,图中为 “你好世界”,则是在 “世”和“界”中间发生了折行,符合设置的 3rem 字符宽度。

控制折行行为的属性

word-break
break-all:用于非 CJK 字符,英文在宽度不足的时候会直接折行,而不是在空格折行
keep-all:用于 CJK 字符,使文本不会发生折行。对于非 CJK 字符,行为和 word-break:normal 一致。

  • white-space
  • overflow-wrap
http://www.lryc.cn/news/233643.html

相关文章:

  • 033-从零搭建微服务-日志插件(一)
  • 短期经济波动:均衡国民收入决定理论(三)
  • 电力感知边缘计算网关产品设计方案-网关软件架构
  • 最新AI创作系统ChatGPT系统运营源码/支持最新GPT-4-Turbo模型/支持DALL-E3文生图
  • Java使用Redis的几种客户端介绍
  • 程序员的护城河
  • 常见面试题-MySQL软删除以及索引结构
  • 信号的机制——信号处理函数的注册
  • JS-项目实战-鼠标悬浮变手势(鼠标放单价上生效)
  • redis运维(十一) python操作redis
  • 黑马程序员微服务 第五天课程 分布式搜索引擎2
  • 什么是UV贴图?
  • 从哪里下载 Oracle database 11g 软件
  • Ingress安全网关
  • Jmeter控制RPS
  • 【Nginx】转发配置nginx.conf
  • uniapp实现下载图片到本地
  • spring cloud-注册中心(Eureka)
  • 004 OpenCV akaze特征点检测匹配
  • openRPA开源项目源码编译
  • 飞书开发学习笔记(八)-开发飞书小程序Demo
  • Unity UI 完全解决方案
  • 为什么打开idea时,没有启动页面,如何解决?
  • golang - 嵌入静态文件打包
  • SQL题
  • GUN介绍
  • 《Effective C++》条款15
  • CTFd-Web题目动态flag
  • 系列九、对象的生命周期和GC
  • spark 窗口滑动用于在不同的数据块之间执行操作