SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【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(単語の途中でも改行する) の値を指定できる。

関連するメモ

コメント