CSSで改行を越える方法

Web デザインと開発における一般的な問題は、テキストや画像を特定の幅のコンテナに適合させることです。ほとんどの場合、これらの要素は、親コンテナの幅に合わせて自動的に縮小または拡張されます。ただし、要素の内容が親コンテナの幅を超える場合は、CSS の「overflow-wrap」プロパティを使用する必要があります。

超行折り返しの機能は、要素のコンテンツが読み取れない、または完全ではない場合に、指定された幅のコンテナ内で強制的に自動行折り返しを実装し、コンテンツをより美しく、読みやすくします。

改行以降の属性値には「normal」と「break-word」の 2 つがあり、その違いは次のとおりです。 ##Default の場合、要素内のテキストは幅コンテナーのサイズに合わせて自動的に折り返されます。この場合、テキストは単語の境界で分割され、前後のスペースの整合性は維持されます。

1. break-word

break-word 属性が設定されている場合、テキストは任意の文字または数字で改行され、強制的に単語の折り返しが行われます。これは、特に長い単語や URL コンテンツがコンテナのスコープを超えないようにする場合に、非常に便利なプロパティです。

以下では、いくつかの例を使用して、行の折り返しを超えて実現する方法を示します。

長い単語の改行を実現する

次は、コンテナーの幅制限を超えない長い単語を含む段落です:

<p>
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

コンテナの幅が大きい場合 場合によっては、テキストが自動的に折り返されません。この問題を解決するために、行の折り返し属性を使用します:

1. <p style="overflow-wrap: break-word;">
      pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
   </p>

効果は次のとおりです:

行の折り返しを実現します。テキスト オーバーフロー

次は制限を超えない段落です。コンテナの幅を超えると、テキストがオーバーフローします:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

コンテナの幅が小さい場合、コンテンツは切り詰められるか、コンテナの幅を超えます。この問題を解決するために、beyond newline 属性を使用します:

2. <p style="overflow-wrap: break-word;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
   </p>

効果は次のとおりです:

beyond newline 属性を使用すると、場合によっては、beyond newline を使用します。属性は、コンテナの幅を超える問題を解決し、Web デザインをより美しく、読みやすくするのに効果的に役立ちます。

以上がCSSで改行を越える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。