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中多行文本中的同寬線條

回答

相關問題