HTML中平衡的文本换行

Question

在HTML中，有没有一种方法可以均匀地分布跨越多行的文本？

例如，我不希望：

   这里是一个非常长的标签，最后分成了两行。

我更喜欢：

                  这里是一个非常长的标签
                      最后分成了两行。

- Tony the Pony

---

text-wrap: balance正在开发中。 - Gajus

@Gajus - 不幸的是，它已经在酝酿了将近十年的时间了。 - ashleedawg

Answer 1

Adobe建议添加一个新的CSS属性text-wrap: balance。

与此同时，他们创建了一个名为balance-text的jQuery插件以实现相同的效果。

- Andy

---

这里是演示。 - ashleedawg

请注意，现在它已经作为本地实用程序提供，除了作为jQuery插件。 - dmulter

这个 CSS 功能将会在 Chromium 113 中推出。你现在可以在 Canary 中尝试它。https://front-end.social/@Una/109949776661803793 - Charles Roper

Answer 2

有点绕，但你可以使用不间断空格来表示最后几个单词：

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

- Collin Anderson

---

另一种类似的方法是手动使用<br>换行，例如<p>这里是一个非常长的标签<br>跨越两行结束</p>。 - Óscar Gómez Alcañiz

然而，这并不是非常响应。 - Stuck

1. 它不具有响应性。
2. 对于动态内容来说毫无用处。
3. 它需要在每个受影响的文本行中手动实现。如果他正在寻找一个非灵活的解决方案，那么简单地在所需内容周围添加新的最大宽度，或者添加空格：nowrap; 将是更实用的解决方案。至少通过媒体查询调整最大宽度仍然保留了一些动态内容和响应式布局的灵活性。

- GibsonFX

没错，这不是一个非常好的通用解决方案，但如果您只需要修复一两个情况，并且可以接受在每个屏幕尺寸上看起来不太完美，那么可能会有所帮助。 - Collin Anderson

Answer 3

在纯HTML/CSS中，没有办法实现这一点，因为没有办法测量行的长度。

一种方法是使用JavaScript，但是当JavaScript计算行长度并相应地拆分时，您将遇到FOBUC。

避免这种情况的最佳方法是使用PHP/ASP/您正在使用的任何其他语言来拆分行。

- Isaac Hildebrandt

---

“最佳方式”并不可靠，因为字体和宽度都可能存在差异。例如，FireFox浏览器有最小字号选项，这可能会破坏此类设置。 - user319799

FOUC（Flash of Unstyled Content）指的是在网页加载时，由于CSS样式表加载慢或延迟导致页面出现未经渲染的样式内容闪烁现象。 - kirkaracha

@kirkaracha 谢谢。看起来“未经样式处理的内容”胜过于“丑陋的内容”... https://dev59.com/kW025IYBdhLWcg3wAg7p#I6afEYcBWogLw_1bAV3Z - mwfearnley

Answer 4

我认为如果您设置元素容器的固定宽度并调整填充属性，您可以实现这一点。

- bancer

Answer 5

这个 CSS 文本属性为标题提供了显著的好处。它被称为 text-wrap: balance，你可以在这里看到它的实际使用案例。

请注意目前它的 浏览器支持 有限。

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

<h2>Here is some really long label that ends up on two lines.</h2>

- Penny Liu