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

CSS3でオーバーフローするテキストを折り返して表示する方法

ボックスからあふれてしまう長いテキスト(オーバーフローテキスト)を途中で折り返して表示したい場合は、CSSの word-wrap プロパティを使用します。値に break-word を指定することで、単語の途中でも強制的に改行され、コンテナ内に収まるようになります。

word-wrapプロパティとは

word-wrap プロパティは、現在のCSS仕様では overflow-wrap という名称に置き換えられていますが、word-wrap も後方互換性のためすべての主要ブラウザで引き続きサポートされています。主な値は以下のとおりです。

  • normal:通常の改行ルールに従います。英単語の途中では改行されず、ボックスからはみ出すことがあります。
  • break-word:単語の途中でも必要に応じて改行し、テキストがコンテナからあふれるのを防ぎます。

サンプルコード

以下は、word-wrap を使ってオーバーフローテキストを折り返す方法を示したコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border: 3px solid #3008c0;
}
div.one {
    width: 200px;
    word-wrap: normal;
}
div.two {
    width: 200px;
    word-wrap: break-word;
}
</style>
</head>
<body>
<h1>Div1</h1>
<div class="one">
Lorem ipsum dolor sitametconsecteturadipisicjhbjhgjingelit. Rerum, beatae.
</div>
<h1>Div2</h1>
<div class="two">
Lorem ipsum dolor sitametconsecteturadipisicjhbjhgjingelit. Rerum, beatae.
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような結果が表示されます。

  • Div1(word-wrap: normal):スペースを含まない長い文字列がそのまま表示されるため、200pxのボックスから右側にはみ出してしまいます。
  • Div2(word-wrap: break-word):長い単語の途中でも自動的に改行されるため、テキスト全体がボックス内に収まります。

このように、URLや英数字の連続した文字列など、スペースのない長いテキストを扱う場合に word-wrap: break-word;(または overflow-wrap: break-word;)を指定すると、レイアウト崩れを防ぐことができます。

  1. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し

  2. CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方

    CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。flex-direction：アイテムが並ぶ方向（主軸の向き）を指定しますflex-wrap：アイテムの折