CSS3中多行文本中的同宽线条

我正在尝试使用CSS3使多行文本具有相同的宽度，并且没有JavaScript。CSS3中多行文本中的同宽线条

为了说明我正在寻找，让我们有这样一句话：

Lorem存有简直是印刷排版行业的虚拟文本。

当显示在一个狭窄的容器，它在多行打破这样的这样的文字：

Lorem存有简直是印刷的虚拟文本和

排版行业。

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

Lorem存有的

印刷排版行业的简单的虚拟文本。

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

单独使用CSS可能吗？如果不是，那么这又会如何呢？

P.S.我想用这种方式设置样式的文字不是固定的，所以固定宽度的解决方案将不起作用。

来源

2016-08-17 gligoran

使用CSS，你只能给予一定的宽度，以该div并使用'字break'但你永远不会知道有多少字是那句话，所以它不是一个很好的选择。 –

什么决定了容器的宽度？你在谈论如何做出回应？ –

@SoorajChandran：这并不重要。它可以是它的父类或像'width'，'max-width'等CSS规则。问题是，当前达到最大宽度时，所有列表在最后填充到该宽度之前都会破坏另一行。相反，我希望文本使用与正常情况相同数量的线条，但是线条中断的位置应使每条线条的宽度大致相同。 – gligoran

这不是一个确切的解决方案。但是，这可能是您最靠近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>

来源

2016-08-18 06:12:40

感谢您的回答，但可悲的是，这不是我正在寻找的解决方案。看来，仅靠CSS就不可能。另外，根据MDN的说法，“word-break：keep-all”不影响非CJK（中文/日文/韩文）文本。目前我的需求只是英文文本，所以这没有什么区别。同样，'text-align：justify'不会影响一行中的实际字数，它只会影响每行中单词之间的间距，但正如您所说，不是最后一行。 – gligoran

CSS3中多行文本中的同宽线条

回答

相关问题