CSS实现文本自动平衡text-wrap: balance

不再有排版孤行和寡行

我们都知道那些标题,最后一个单词换行并单独站在新行上,破坏了视觉效果,看起来很奇怪。当然,有老式的 手动换行或将内容分成不同部分。但您听说过text-wrap: balance吗?

通过应用text-wrap: balance属性,浏览器将自动计算单词数并将它们平均分配到两行------非常适合页面标题、卡片标题、工具提示、模态框和FAQ等。

复制代码
.title {
 
    text-wrap: balance;
}
相关推荐
小桥风满袖2 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin932 分钟前
埋点方案实现
前端
斯~内克6 分钟前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
tianchang18 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
掘金安东尼26 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
Hilaku27 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码31 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心33 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt40 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅41 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试