css HTML中的平衡文本换行

roejwanj 于 2023-08-08 发布在其他

关注(0)|答案(5)|浏览(151)

在HTML中，有没有一种方法可以将文本均匀地分布在多行中？
例如，我不想：

Here is some really long label that ends up on
   two lines.

字符串
我更喜欢：

Here is some really long label 
                      that ends up on two lines.

型

5条答案

Adobe建议添加一个新的css属性text-wrap: balance。
与此同时，他们创建了一个名为balance-text的jQuery插件来实现相同的结果。

这是一种变通方法，但您可以在最后几个单词中使用不间断空格：

<p>Here is some really long label that ends on&nbsp;two&nbsp;lines</p>

字符串

在纯HTML/CSS中，没有办法做到这一点，因为没有办法测量行的长度。
一种方法是使用JavaScript，但您最终会得到一个FOBUC，而javascript会计算行长度并相应地将其拆分。
避免这种情况的最好方法是使用PHP/ASP/Whatever拆分行。

我认为你可以通过设置元素容器的固定宽度并使用padding属性来实现。

这个CSS文本属性为标题提供了显著的好处。它被称为text-wrap: balance，您可以看到它的实际用例here。
请注意目前它的browser support有限。

h2 {
  font-size: 2rem;
  text-align: center;
  
  /* Balances the text across multiple lines */
  text-wrap: balance;
}

个字符