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

    HTML / CSS

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

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

  2. html5

    HTML / CSS

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

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

  3. 20140114233255.jpg

    HTML / CSS

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. 手放せないドリッパー! ブルーボトルコーヒーのオリジナルドリッパー

    プロダクト

    手放せないドリッパー! ブルーボトルコーヒーのオリジナルドリッパー
  2. 3段組

    WordPress

    3段組の準備完了
  3. 日常

    ハイ・テンション
  4. 日常

    連休前だから
  5. コメント覧再デザイン

    WordPress

    またコメント覧いじった。
PAGE TOP