ブログBlog

CSS:overflow-wrap break-wordが効かない

今回は、cssでoverflow-wrapでbreak-wordを使った際に、この設定がなぜか効かずに原因がわかるまではまった事があり、その対処の備忘録です。

 

CSSのプロパティ「overflow-wrap」

overflow-wrapは、インライン要素に対して、テキストがそのボックスの幅の長さ以上だった際の振る舞いを設定する事ができます。

 

overflow-wrap:normal;

単語の単位(単語間のスペースなどで判断)で分割し改行します。そのため、テキストがボックスの幅の長さに到達した際に、これが長い単語だった場合には、あふれる(はみ出す)場合があります。

例)こんな感じです。。。黄色の部分がボックスです。

123456789012345678901234567890123

 

overflow-wrap:break-word;

テキストがそのボックスの幅の長さに到達した際、これが長い単語だった場合には、単語を分割し(break-word)、ボックスからあふれない(はみださない)ようにテキストを表示します。

例)

123456789012345678901234567890123

 

その他、overflow-wrap:anywhereというのもあるのですが、使った事が無いので割愛します(なお、iOSでは使えない指定です)。

 

今回発生した事象

以下の用に、overflow-wrap:breadk-wrapを使い、ボックスからはみ出さないように指定しているのですが、テキストがはみ出しています。

再現例)

 

123456789012345678901234567890123

 

 

原因

display:inline-block;や、float:left;、position:absolute;などのプロパティが設定されているような場合においては、幅と最大幅を指定する必要があります。

この幅指定が無いと、width:auto;となり、自動的に親のボックスが子供の要素幅に合わせて縮小されます。

そのため、overflow-wrap:breadk-wrapを使って、ボックスからテキストがはみ出さないように指定しても、親のボックス幅を計算する事ができず、あふれたかどうかの判断ができないため、このプロパティが効かない事象が発生していました。

 

対処

以下のように書き換えたところ問題なく、ボックスからテキストがあふれずに表示されます。

対処例)

 

123456789012345678901234567890123

 

わかるとあ~なるほどとわかるのですが、はまってしまうと抜けだすのが本当に大変です。

皆さまのお役に立てれば幸いです。

 

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU