如何在多行上均匀地平衡文本？ [英] How can I evenly balance text over multiple lines?
问题描述
我想显示一小段文字，可以换成两三行。它位于一个高度可视化的元素内，出于样式目的，我希望这些行的长度尽可能相等，最好是一行多于两条。
I'd like to display a short piece of text that may wrap to two or three lines. It's inside a highly visual element and for styling purposes I'd like the lines to be as equal in length as possible, preferring one line over two.
而不是：
这是一段文本的示例，该文本将换成两个
This is an example of a piece of text that will wrap to two
行。
我想要这个：
这是一段
This is an example of a piece of
文本的示例，该文本将换行为两行。
text that will wrap to two lines.
但是我不想限制文本容器的宽度：
But I don't want to limit the width of the text container:
此文本足够长，只能用于勉强适合两行。
This text is long enough to just barely fit in two lines. It
不应换成三行或更多行，因此没有宽度限制。
should not wrap to three or more lines so no width limiting.
是否可以用纯CSS或使用可容忍的JavaScript做到这一点？
Is there a way to do this in pure CSS or with a tolerable amount of JavaScript?
推荐答案
CSS文本模块4属性：
The CSS Text Module 4 property:
text-wrap: balance;
将执行此操作。 https://drafts.csswg.org/css-text-4/#text -wrap
还有包，该包为现有的浏览器实现了polyfill。
There's also a package which implements a polyfill for existing browsers.
这是一个余额文字演示。
这篇关于如何在多行上均匀地平衡文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
