使用CSS在两个等长行中分解一个长字符串

Question

我有一个较长的URL，它不适合移动视图中的容器宽度，因此我在容器中添加了word-wrap:break-word;。结果是，一行上的字符串很长，而第二行上的字符串其余部分很短。

如何使两行具有相同数量的字符（以便它们可以具有相同的宽度？）

Answer 1

解决此问题的唯一真实方法是确保容器的width被约束为（大约）文本长度的两倍。

例如，以下文本的长度约为630像素，因此除了width之外还设置315px的{​​{1}}会导致两行文本的长度相等：< / p>

word-wrap: break-word

.example {
  width: 315px;
  word-wrap: break-word;
}

请注意，使用JavaScript的.offsetWidth可以计算现有宽度并自动设置新宽度，尽管我不相信 这可能与calc()组合使用和width: fit-width在纯CSS中。

<div class="example">AVeryVeryVeryVeryLongUrl/SomeFolder/SomeSubFolder/SomePage.htmlisthebestfileextension</div>

var example = document.getElementsByClassName('example')[0];
example.style.width = example.offsetWidth / 2 - 8 + "px";
// Half the current width, also accounting for the 8px of margin

.example {
  word-wrap: break-word;
}