各段落の最後の行を残りの文字列よりも短くする

植字では、各段落の最後の行を残りの行より少なくとも少し短くすることをお勧めします。 CSSを使用してこれを達成するにはどうすればよいですか？各段落の最後の行を残りの文字列よりも短くする

2017-08-17 Nuvanda

これは、しかし、あなたはこのようにCSSの::after擬似要素を使って、この制限を回避することができ、CSSの機能として使用できません。

p { 
 
    text-align: justify; 
 
    text-align-last: left; 
 
} 
 

 
p::after { 
 
    content: '––––––––––––––––––––'; 
 
    visibility: hidden; 
 
    white-space: nowrap; 
 
}

<p style='width: 380px'> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
    sed do eiusmod tempor incididunt ut labore et dolore 
 
    magna aliqua. Ut enim ad minim veniam, quis nostrud 
 
    exercitation ullamco laboris nisi ut aliquip ex ea 
 
    commodo consequat. Duis aute irure dolor in 
 
    reprehenderit in voluptate velit esse cillum dolore eu 
 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
 
    non proident, sunt in culpa qui officia deserunt mollit 
 
    anim id est laborum.</p>

これが最後ということ、を保証します段落の行は、他の行より少なくとも20en短くなります。行にコンテンツが多すぎる場合、最後の単語は次の行に分割されます。

注これが最後の言葉と擬似要素の間で許可される改行の原因となりますので、あなたの段落は、任意の末尾にスペースが含まれていないことを確認してください。

出典

2017-08-17 15:44:05 Nuvanda

このテクニックを使用したプロジェクトを継承した場合、すぐに削除します。 – sheriffderek

タイプセットでは、列の幅や長さなど、多くのものを事前に設定できます。ウェブ上では、どのコンテンツが動的か変更されるか、またはあなたのサイトがどのように表示されるかは分かりません。従来のポスターレイアウト（）のようなグラフィックレイアウトで作業している場合は、の<br>改行を使用するか、別のディバイダでコピーを分割して必要なデザインを作成します。

出典

2017-08-17 16:04:01 sheriffderek

ラインブレイクをあらかじめ決めておくことができれば、ブラウザーで貪欲なラインブレイクよりも優れた改行アルゴリズムを使用できるので、これは常により良い解決方法です。 – Nuvanda

各段落の最後の行を残りの文字列よりも短くする

答えて

関連する問題