CSS3の複数行のテキストと同じ幅の行

Question

CSS3を使用し、JavaScriptを使用せずに複数行のテキストを同じ幅にしようとしています。私が探しているものを説明するために

、のこの文章を見てみましょう：

Loremのイプサムは、単に印刷と植字業界のダミーテキストです。

それは、このような複数行に渡って破る狭い容器にこのテキストを表示する場合：

Loremのイプサムは、単に印刷と

植字業界のダミーテキストです。

私は何をしたいのですが、それはこのようなものを壊す持っている

：

Loremのイプサムは、単に

印刷と植字業界のダミーテキストです。

各行の長さはほぼ同じです。

これはCSSだけで可能ですか？もしそうでなければ、これはどのように可能でしょうか？

P.S.このようにスタイルを設定したいテキストは一定ではないので、固定幅の解決法は機能しません。

Answer 1

これは正確な解決策ではありません。しかし、これはあなたがCSSだけで近づけることができるかもしれません。

word-break:keep-allと一緒にtext-align:justifyを使用すると、最後の行を除くすべての行をコンテナの全長にすることができます。

最終行の長さは、テキストに応じてコンテナの長さに近い場合とそうでない場合があります。

サイズ変更可能なコンテナを使用して同じものを表示する。 CSSで

$(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>