CSS3中多行文本中的等宽行

Posted 2023-03-06

【中文标题】CSS3中多行文本中的等宽行

【英文标题】：Same-width lines in multiline text in CSS3

【发布时间】：2016-12-23 22:28:35

【问题描述】：

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

为了说明我在寻找什么，让我们来看这句话：

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

当在狭窄的容器中显示此文本时，它会像这样跨越多行：

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

排版行业。

我想做的是让它破坏这样的东西：

Lorem Ipsum 只是

的虚拟文本

印刷和排版行业。

现在每行的长度几乎一样了。

单独使用 CSS 是否可行？如果不是，这怎么可能？

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

【问题讨论】：

使用 css，您只能为该 div 赋予一定的宽度并使用word-break，但您永远不会知道该句子中有多少单词，所以这不是一个好的选择。

是什么决定了容器的宽度？你是说让这个响应式的？

@SoorajChandran：没关系。它可以是它的父级，也可以是 width、max-width 等 CSS 规则。问题是，当前当达到最大宽度时，最后一个列表之前的所有列表都会填充到该宽度，然后再插入另一行。相反，我希望文本使用与通常相同数量的行，但换行符的放置方式应使每行的宽度大致相同。

【参考方案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>

【讨论】：

感谢您的回答，但遗憾的是，这不是我正在寻找的解决方案。似乎单独使用 CSS 是不可能的。此外，根据 MDN，word-break: keep-all 不会影响非 CJK（中文/日文/韩文）文本。目前我的需求只是英文文本，所以这没有什么区别。另外text-align: justify 不会影响一行中的实际单词数，它只会影响每行中单词之间的间距，但正如您所说，不会影响最后一行。