Question

我尝试使用CSS3而不是JavaScript来创建相同宽度的多行文字。

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

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

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

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

排版行业。

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

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

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

这是否可以单独使用CSS？如果没有，这怎么可能呢？

P.S。我希望以这种方式设置样式的文本不是恒定的，因此固定宽度解决方案不起作用。

Answer 1

这不是一个确切的解决方案。但这可能是您单独使用CSS时最接近的。

您可以使用text-align:justify和word-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>

CSS3中多行文本中的相同宽度行

1 个答案: