CSS3 多行文本中的同宽行

Question

我正在尝试使用 CSS3 而不是 JavaScript 使多行文本具有相同的宽度。

为了说明我正在寻找的内容，让我们看这句话：

Lorem Ipsum 是印刷和排版行业的简单虚拟文本。

当在狭窄的容器中显示此文本时，它会跨多行，如下所示：

Lorem Ipsum 只是打印的虚拟文本，

排版行业。

我想做的是让它打破这样的事情：

Lorem Ipsum 只是以下的虚拟文本

印刷和排版行业。

现在每条线的长度几乎相同。

单独使用 CSS 可以吗？如果不是的话，这怎么可能呢？

PS 我想要以这种方式设置样式的文本不是恒定的，因此固定宽度解决方案不起作用。

Answer 1

这不是一个精确的解决方案。但这可能是仅使用 CSS 所能达到的最接近的结果。

您可以使用text-align:justifywithword-break:keep-all来使除最后一行之外的所有行占据容器的整个长度。

最后一行的长度可能接近也可能不接近容器的长度，具体取决于文本。

使用可调整大小的容器来显示相同​​的内容。

$(function() {
  $("#container").resizable();
});

#container {
  width: 350px;
  height: 200px;
  border: 2px solid #ccc;
  
  text-align:justify;
  word-break:keep-all;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
  Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Nullam vel sem. Aenean commodo ligula eget dolor. Phasellus nec sem in justo pellentesque facilisis. Praesent turpis. Cras varius. Proin magna. Mauris sollicitudin fermentum libero. Donec vitae sapien ut libero venenatis faucibus. Cras dapibus.
</div>