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

不再有排版孤行和寡行

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

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

复制代码
.title {
 
    text-wrap: balance;
}
相关推荐
沐墨染1 天前
Vue实战:自动化研判报告组件的设计与实现
前端·javascript·信息可视化·数据分析·自动化·vue
局外人LZ1 天前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
爱上妖精的尾巴1 天前
8-5 WPS JS宏 match、search、replace、split支持正则表达式的字符串函数
开发语言·前端·javascript·wps·jsa
为什么不问问神奇的海螺呢丶1 天前
n9e categraf redis监控配置
前端·redis·bootstrap
云飞云共享云桌面1 天前
推荐一些适合10个SolidWorks设计共享算力的服务器硬件配置
运维·服务器·前端·数据库·人工智能
刘联其1 天前
.net也可以用Electron开发跨平台的桌面程序了
前端·javascript·electron
韩曙亮1 天前
【jQuery】jQuery 选择器 ④ ( jQuery 筛选方法 | 方法分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找 )
前端·javascript·jquery·jquery筛选方法
前端 贾公子1 天前
Node.js 如何处理 ES6 模块
前端·node.js·es6
pas1361 天前
42-mini-vue 实现 transform 功能
前端·javascript·vue.js
esmap1 天前
OpenClaw与ESMAP AOA定位系统融合技术分析
前端·人工智能·计算机视觉·3d·ai·js