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. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    『N-G-G Field Guide People and Portraits』…
  2. 20130923160422.jpg

    iOS

    Xcode5でステータスバーを非表示にする方法
  3. 日常

    デュアルなノート
  4. 20130721170716.jpg

    iOS

    Xcodeでファイルのリンクが外れたときの対処方法
  5. d_design_travel_yamaguchi-1.jpg

    読書

    山口県を旅したくなる 『d design travel 山口』
PAGE TOP