HTML / CSS

CSSで英単語の途中から改行する方法

Word wrap break word1

気がつくのが遅かったのですが、英単語で途中から改行されないんですね。短い英単語なら問題ないのですが、ちょっと長い英単語になるとこれは問題です。

以下の画像を見ると分かる通りに、カッコ悪い。

Word wrap break word2

対策を調べているとCSSで改行の設定ができるようです。だいたい以下のような記述でできると情報が載っていました。ただし私の場合はサイドバーのタイトルがうまく改行されませんでした。

#npcatch {
    word-wrap: break-word;
}

さらに調査すると以下の記述でサイドバーのタイトルも改行できるようです。

#npcatch {
    table-layout:fixed;
    word-break:break-all;
    word-wrap:break-word;
}

その結果が以下の画像です。英単語の途中からしっかりと改行されるようになりました。

サイドバーのタイトルばかりだけではなく本文なども改行されるようにCSSを設定しようかと思います。

Word wrap break word3

以下のブログを参考にさせていただきました。

12436288584_94d6bc46d2_b.jpg
ローマ字がdivを突き抜ける場合、折り返しをするには 基本的には下記を入れれば大丈夫です。 word-wrap:

こんなこと初めから気を利かせてやってくれればいいのに! とか思っちゃいましたが、わりと簡単に設定できてよかったです。ちょっとしたことですが、こういうのって大事ですよねー。

関連記事

  1. 20140114233255.jpg

    HTML / CSS

    アプリ内webブラウザのエラーを解消

    HTML5でWebアプリをつくり、アプリ内ブラウザで表示させたとき…

  2. html5_rudy.jpg

    HTML / CSS

    HTML5で正式な仕様になったルビがおもしろそう

    テキストでルビを表示してくれるのでいい感じそう。ただ、今の環境…

  3. html5

    HTML / CSS

    HTML4とHTML5の違いをざっくりと

    ちょっと今まで意識していなかったので、思いっきりざっくりとまとめてみ…

アーカイブ

  1. 日常

    レディングのつながり
  2. 日常

    ご飯会
  3. 日常

    webリニューアル案件
  4. しんかい6500シンポジウム

    イベント

    有人潜水船「しんかい6500」就航20周年記念シンポジウム
  5. 日常

    「ニッポンのデザイナー展」セミナー1
PAGE TOP