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

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. HTML / CSS

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

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

  2. HTML / CSS

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

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

  3. HTML / CSS

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

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

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    「技術」と「表現」
  2. まってました。「スター・ウォーズ × ビックリマン」のエピソード1・2・3がきた♪

    コレクション

    まってました。「スター・ウォーズ × ビックリマン」のエピソード1・2・3がきた…
  3. FacebookのLike Boxをレスポンシブ対応させる方法

    WordPress

    FacebookのLike Boxをレスポンシブ対応させる方法
  4. 日常

    アップルのネットブック?
  5. 展覧会

    グッドデザインばかりが集められた「GOOD DESIGN EXHIBITION …
PAGE TOP