【CSS】長い単語、URLなどがボックスやテーブルからはみ出るときの対策
問題
tableの中にURLなどが入ると、幅がバラバラになって困るんですけど。
長い単語がボックスからはみ出て困るんですけど。
答え
スタイルシートのword-wrapが使える。
残念ながらOperaは対象外だそうだ。
こうして
<p style="width:50px; border:1px solid #cc0000;">https://www.softel.co.jp/blogs/tech/</p>
表示すると、はみでる。
https://www.softel.co.jp/blogs/tech/
こうして
<p style="width:50px; border:1px solid #cc0000; word-wrap:break-word;">https://www.softel.co.jp/blogs/tech/</p>
表示すると、英語圏の人には気持ち悪いかもしれないが、ボックスには収まる。
https://www.softel.co.jp/blogs/tech/
word-wrap プロパティには、normal（単語の途中で改行しない） もしくは break-word（単語の途中でも改行する） の値を指定できる。
コメント