CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのword-wrapプロパティで長い行を折り返して次の行に表示する方法

CSSの word-wrap プロパティを使用すると、要素の幅からあふれてしまう長いテキストや単語を折り返し、次の行へ自動的に送ることができます。ここでは、word-wrap プロパティの使い方をサンプルコードとともに解説します。

word-wrapプロパティとは

word-wrap: break-word; を指定すると、通常なら折り返されないスペースを含まない長い英単語が、要素の幅に合わせて途中で改行されます。これにより、URLのような切れ目のない長い文字列でも、レイアウトが崩れることなく表示できます。

なお、このプロパティは現在では標準仕様として overflow-wrap という名称に置き換えられていますが、後方互換性のため、多くのブラウザで引き続き利用可能です。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 200px;
        border: 2px solid #000000;
      }
      div.b {
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>word-wrap: break-word property</h2>
    <div class = "b"> ThisisdemotextThisisdemotext:
    thisisaveryveryveryveryveryverylongword.
    The long word wraps to the next line.</div>
  </body>
</html>

実行結果

上記のコードを実行すると、幅200pxのボックス内で、スペースを含まない非常に長い英単語が要素の幅に合わせて途中で折り返され、次の行に表示されます。
word-wrap を指定しない場合は、長い単語がボックスからあふれ出てしまいますので、実際に両方のケースを試して違いを確認してみてください。

CSSのword-wrapプロパティで長い行を折り返して次の行に表示する方法

  1. CSSで「次へ」「前へ」ボタンを作成する方法をわかりやすく解説

    Webサイトのページ送りやスライダーなどでよく使われる「次へ（Next）」と「前へ（Previous）」ボタンは、CSSを使えば簡単に美しく作成できます。この記事では、丸型デザインのナビゲーションボタンを実装する具体的なコード例を紹介します。 実装のポイント ボタンを作成する際の主なポイントは以下の通りです。 display: inline-block; を指定して、aタグでもパディングやサイズ調整ができるようにします。 border-radius: 50%; を使うことで、正円形のボタンにできます。 :hover 疑似クラスで、マウスオーバー時の色変化を設定し、インタラクティブな印象を与え

  2. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま