こんな感じに長いテキストを打ち込むと横スクロールすると思います。スマートフォンなんかで見るとものすごくうざいことになりそう。次に、長いテキストを打ち込んだ例です。横スクロールバーが出ていると思います。どちらも適用しているスタイルは同じものです。横幅が溢れたときだけ横スクロールします。AAとか、ポエムとか、勝手に改行されたくないデータを表示するときに便利です。text</p>外枠となるボックスにクラスをつけるだけです。この例ではPタグで囲ってますが、状況に応じてDIVなどに振り替えて下さい。#fdf1f3;}white-space属性の指定と、行が溢れたときの指定がメインです。後の指定は見た目を整えてるだけですが、思いのほか使い勝手の良い子です。white-spaceの仕様そんなわけで、テキストの折り返し属性や横スクロールと上手に付き合うためのwhite-space属性です。折り返し設定に関するカスタマイズでハマったときはwhite-space属性の違い知る必要があるでしょう。MDNからwhite-spaceの仕様を抜き出して一覧表にしてみました。ソース内の改行文字も空白文字として扱われます。行ボックスを埋めるために、必要なら行を折り返します。空白を詰めますが、行の折り返しは行いません。pre-wrap連続する空白はそのまま残されます。要素のあるときか、行ボックスを埋めるのに必要なときに行います。要素のあるときか、行ボックスを埋めるのに必要なときに行われます。MDNみどころとなる要素は「自動折り返し」「連続スペースの処理」「改行」の3つですね。折り返すwhite-spaceを比較するためのサンプルコード実際のケーススタディとしてこちらもデモを作ってみます。</p>上のようなテキストを用意して、Pタグに設定したwhite-spaceの挙動を見てみます。ちなみに上のHTMLはレンダリング後の姿で、実際は以下のようなコードでチェックしてます。;}white-space属性ごとの違い以下、具体的に折り返し条件についてみていきます。「改行」「空白とタブ」「テキストの折り返し」に注意してみてください。単語の途中でも強制的に折り返しますね。半角スペースが詰まりました。外枠にかかわらず折り返しません。半角スペースそのまま。外枠にかかわらず折り返しません。半角スペース詰まります。折り返して変な改行が入ります。半角スペースそのまま。折り返して変な改行が入ります。前項「pre-wrap」との違いが微妙ですけど、半角スペースが詰まっております。まとめ改行に関する設定はCMSごとにPタグが自動挿入されたりいろいろです。この結果を参考に適切な設定を振り分けてみて下さい。技術部についておち研技術部ではWeb関連技術やサイト運営に関する情報をお知らせしています。お探しの記事がありましたら下の検索窓からどうぞ。姉妹サイトいろいろやってます。Mizuki花鳥風月をこよなく愛する体育会系エンジニア。めざせフルスタック~(白目)。コメントをキャンセルメールアドレスは開示されません。エラーが出たら違うCaptchaコードもお試し下さい。