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. html5

    HTML / CSS

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

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

  2. 20140114233255.jpg

    HTML / CSS

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

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

  3. html5_rudy.jpg

    HTML / CSS

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

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

アーカイブ

  1. 1Paswordでプライベートと仕事でパスワードの保存先を分ける方法

    MacApp

    1Passwordでプライベートと仕事でパスワードの保存先を分ける方法
  2. 日常

    アートプロジェクト
  3. santefx_evangelion_asuka-1.jpg

    プロダクト

    ヱヴァンゲリヲン・コラボ目薬のアスカ・モデルを買いました! カラーリングがかっこ…
  4. choo_chooo-1.jpg

    読書

    【絵本】鉄道好きな男子にぜひ!『いたずら きかんしゃ ちゅうちゅう』
  5. freitag_f41_hawaii_five_0-1.jpg

    プロダクト

    【F】マイ・ファースト・フライターグ「F41 HAWAII FIVE-0」
PAGE TOP