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. html5_rudy.jpg

    HTML / CSS

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

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

  3. 20140114233255.jpg

    HTML / CSS

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

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

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. html5_rudy.jpg

    HTML / CSS

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

    イベント

    はやぶさ地球帰還1周年記念講演会
  3. 日常

    照明調査
  4. 日常

    またもや、懐かしい人たちと
  5. ガジェット好きは必携!! アダプタ用の延長ケーブル「ELECOM 電源ケーブル 延長コード 0.1m」

    プロダクト

    ガジェット好きは必携!! アダプタ用の延長ケーブル「ELECOM 電源ケーブル …
PAGE TOP