使用 CSS 将长字符串分成两条等长的行答案

【问题标题】：Use CSS to break up a long string in two equal-length lines使用 CSS 将长字符串分成两条等长的行
【发布时间】：2019-10-02 20:34:21
【问题描述】：

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

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

【问题讨论】：

CSS 无法单独执行此操作，除非您的字体大小、字体间距、字体粗细等在所有设备上都是固定的静态值，您可以执行 @obsidianage 建议的操作，但又一次它之所以有效，是因为 char 长度是 85，它可以整除，因此每行 42 个字符，并且严格依赖静态值来考虑任何大小调整。但是，您可以使用 javascript 并在任何大小之间使其非常准确，只要字符长度可以均匀整除，当然如果您想要一个示例。
我突然想到将字符串分成两个跨度，每个跨度有一半的字符数......这样行吗？

标签： css word-wrap word-break

【解决方案1】：

解决这个问题的唯一真正方法是确保容器的width 被限制为（大约）文本长度的两倍。

例如，以下文本的长度约为 630 像素，因此在 315px 之外设置 width 和 word-wrap: break-word 会导致两行文本的长度相同：

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

&lt;div class="example"&gt;AVeryVeryVeryVeryLongUrl/SomeFolder/SomeSubFolder/SomePage.htmlisthebestfileextension&lt;/div&gt;

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

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;
}

&lt;div class="example"&gt;AVeryVeryVeryVeryLongUrl/SomeFolder/SomeSubFolder/SomePage.htmlisthebestfileextension&lt;/div&gt;

【讨论】：