[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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现文本超出n行后折叠,并添加一个点击展开的功能,你可以使用JavaScript来处理。以下是一种实现方法: HTML部分: ```html <div class="container"> <div class="content">这里是文本内容</div> <button class="expand-btn">展开</button> </div> ``` CSS部分: ```css .container { height: /*固定高度*/; line-height: /*行高*/; overflow: hidden; display: -webkit-box; -webkit-line-clamp: /*n行*/; -webkit-box-orient: vertical; } .expand-btn { display: none; /*默认隐藏展开按钮*/ } ``` JavaScript部分: ```javascript const container = document.querySelector('.container'); const content = document.querySelector('.content'); const expandBtn = document.querySelector('.expand-btn'); // 判断是否需要展开按钮 if (content.offsetHeight > container.offsetHeight) { expandBtn.style.display = 'block'; } // 展开按钮点击事件 expandBtn.addEventListener('click', function() { if (container.classList.contains('expanded')) { container.classList.remove('expanded'); expandBtn.textContent = '展开'; } else { container.classList.add('expanded'); expandBtn.textContent = '收起'; } }); ``` 通过以上代码,当文本内容超出容器的高度时,展开按钮会显示出来。点击展开按钮,切换容器的展开状态,并修改按钮的显示文本。你可以根据需要自定义样式和按钮的文本。记得替换代码中的注释部分为你想要的具体数值和文本内容。希望对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值