長い単語が div を壊さないようにするにはどうすればよいですか?

場合によっては、開発者は Web ページに長い単語を表示する必要があります。たとえば、URL や長いファイル名などを表示します。場合によっては、単語の長さが親コンテナーの長さよりも長くなり、その単語によってコンテナーが破壊されることがあります。

たとえば、ファイルの詳細を表示するカードを作成しましたが、ファイル名が非常に長いため、カードが破損する可能性があり、常に見栄えが悪くなります。したがって、開発者は、長い単語が div 要素を分割することを防ぐために、それらをラップする必要があります。

解決策を始める前に、例を通して問題を理解しましょう。

例 1 (長い単語の分解 div)

以下の例では、div 要素を作成し、div 要素内に「p」要素を追加します。さらに、「p」要素のテキストに長い単語を追加しました。

CSS では、div 要素のサイズを固定に設定します。出力では、ユーザーは単語が div 要素を分割し、そこからオーバーフローする瞬間を観察できます。

リーリー

単語を区切る CSS プロパティを使用して単語を区切る

このアプローチでは、「word-break」CSS プロパティを使用して、単語が div 要素を分割しないようにします。 「word-break」属性を使用すると、単語がコンテナの幅を超える場合に単語をどのように分割するかを決定できます。

単語を区切るには、異なる値が必要です。 「通常」値は、指定されたブレークポイント (スペース、ハイフンなど) でのみ単語を分割します。 「break-all」値はオーバーフローした文字で単語を分割し、「keep-all」値は単語を分割しません。言葉。

ここでは、「ブレークオール」値を使用して、任意の文字から単語を分割します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って「word-break」CSS プロパティを使用して、長い単語によって div 要素が分割されるのを防ぐことができます。

リーリー

例 2 (長い単語による div の損傷を防ぐ)

以下の例では、最初の例で追加した長い単語をコンテナー div 要素内に追加しています。 CSS では、単語によって div 要素が分割されるのを防ぐために、「word-break」プロパティと「break-all」値を使用します。

出力では、単語が特定の文字で区切られ、単語の残りの文字が次の行に表示されていることがわかります。

リーリー

オーバーフローラップ属性を使用する

「overflow-wrap」属性を使用すると、要素のコンテンツが親要素からオーバーフローした場合に、要素のコンテンツをどのように折り返すかを決定できます。 「overflow-wrap」属性の「break-word」値を使用すると、長い単語が折り返しによって div 要素を分割するのを防ぐことができます。

＃＃＃文法＃＃＃

ユーザーは、「overflow-wrap」CSS プロパティを使用して、次の構文に従って長い単語をラップできます。

リーリー

例 3

以下の例では、「p」要素のテキストとして非常に長い単語を追加しています。その後、親要素の「overflow-wrap」属性を使用して、単語を区切ってオーバーフローしたコンテンツを次の行にラップします。

出力では、単語が途中で切れており、残りの文字が次の行に表示されていることがわかります。

リーリー

例 4 (JavaScript を使用して Overflow-wrap 属性を設定する)

長い単語が div を分割しないようにするために、JavaScript を使用する必要がある場合があります。たとえば、データベースから製品データを取得します。製品名が非常に長い場合は、特定の製品の「overflow-wrap」属性を使用して長い製品名をラップできます。

JavaScript では、HTML 要素にアクセスし、スタイル オブジェクトの「overflowWrap」プロパティを使用して、長い単語が div 要素を分割するのを防ぐことができます。

リーリー

ユーザーは、長い単語が div 要素を分割しないように、さまざまな CSS プロパティを使用する方法を学びました。最初の方法では、「word-break」CSS プロパティを使用して、ブラウザが単語を区切る方法を指定します。 2 番目のアプローチでは、「overflow-wrap」CSS プロパティを使用して、div 要素のコンテンツのオーバーフローを処理する方法を指定します。

以上が長い単語が div を壊さないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。