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

不再有排版孤行和寡行

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

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

.title { text-wrap: balance; }

②换行符

方法二：利用 CSS 的white-space

如果数据里本身就是真实的换行符（不是\n字符串，而是实际换行），可以直接写：

<div v-if="i.nodeName !== '联合审查'" class="balance">{{ i.userName }}</div> <div v-else class="balance">{{ i.userName }}-{{ i.deptName }}</div> .balance { white-space: pre-wrap; /* 保留换行符和空格 */ }