要素がボックスをはみ出たときにする対応まとめ
こういう状態に
※HTMLのサンプルを見る
なったことはありませんか？
半角が「/」や「-」などがない状態で連続して続くと改行しないで、そのまま横に表示されてしまう現象です。
英語とかだと区切りがなかったら1単語なので、改行しないという理由はわかりますね。
でもURLとかだと結構頻繁にあったりして困ったりします。
というか今日困っていた会社の同僚が居たので自分用にもまとめて置いてみようと思います。
自分がこうなったときに参考にした方法やそのサイトのまとめを書きます。
※対応ブラウザは、IE6、Firefox3↑、Opera10、Safari3↑、Crome3を考慮しています。
大まかな対応方法
大きく分けて3パターンあります。
- CSSのみでボックス内にキチンと収める方法
- HTMLに強引にタグを追加して、表示する方法
- CSSのみでごまかす方法
凄いアバウトな説明ですが、上記3つで大体の対応方法が分かれるかなーと思います。
ちなみにお勧め順で記載しています。
1.CSSのみでボックス内にキチンと収める方法
長い単語やURLの改行をコントロールするword-wrapプロパティで紹介されている要素の
word-break: break-word;※HTMLのサンプルを見る
を用いる方法です。
この要素を使えばおそらく期待したとおり、ボックスの横幅でキチンと改行を行ってくれます。
ただこの対応は、OperaとFirefox3では適用されないので、完璧とも言いがたいです。が一番理想的な対応方法のように思えます。
早くFirefox3.5が当たり前になれば問題がないのですが…
2.HTMLに強引にタグを追加して、表示する方法
次の方法ですが、これは表示はどのブラウザでも恐らくほぼ完全に動作するのですが、HMTLソースが汚くなるので2番手となっています。
この手段の場合以下の2通りの対応方法があるかと思います。
- ​を用いる
- <wbr>を用いる。
これらは改行させたい文字列の間に、このテキストを流し込みます。どういうことかというと…
例)kzms2
k​z​m​s​2※HTMLのサンプルを見る
k<wbr>z<wbr>m<wbr>s<wbr>2※HTMLのサンプルを見る
といった感じに使用します。上記文字列を入れたところで改行を発生させることが可能になります。
閲覧する分にはなんら影響はないので、場合によってはこの手段の対応でもよい場合もあるのかと思います。
3.CSSのみでごまかす方法
この対応方法は、HTMLはいじらないのですが、本来の要求とちょっと異なってしまうので、3番手の対応としました。
場合によってはこの対応でもアリだったりするかもしれないので、書いてみます。
この対応も2パターンほどあるかと思います。
- 文章の途中で「…」を用いて文章を短縮してしまう
- ボックス内スクロールを用いて表現する
CSSだけで文字列を省略して「・・・」を付けて表示する方法のエントリーに記載してあった内容ですが、文言を「…」で隠してしまうことが可能です。
やり方としては、
横幅(width)、white-spce: nowrap、overflow:hidden;
を指定する。
とのことなので、
width:80px;※HTMLのサンプルを見る
white-spce:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
上記のように記載することで対応することが可能となります。
また最後ですが、overflow:auto;を用いることによって以下のように表示させる事も出来ます。
この場合、
overflow:auto;※HTMLのサンプルを見る
を追加すれば対応が可能になります。
これはどのブラウザも問題なく同じ挙動になりますが、そもそもの解決になっているかといえば怪しいです…
まとめのようなもの
個人的に対応を行うとしたら以下のようにすると思います。
width:100px;※HTMLのサンプルを見る
border:1px solid #33f;
background-color:#fff;
word-wrap:break-word;
overflow:auto;
と、上記のように「CSSのみでボックス内にキチンと収める方法」と「CSSのみでごまかす方法」の合わせ技で対応するかと思います。
word-break: break-word;をメインにして、対応していないブラウザは、overflow:auto;で吸収、という対応方法です。
実際に見るお客様が、見やすいように出来ればよいので、上記の組み合わせで必要に応じて使用できればいいのではないかな、と個人的には思います。
参考にしたサイト様
- builder様の長い単語やURLの改行をコントロールするword-wrapプロパティより
- Web制作で今すぐ使えるテクニック集様のエントリー、CSSだけで文字列を省略して「・・・」を付けて表示する方法より
上記のサイトを参考にさせていただきました。有難うございます。
またこちらの記事の記載事項に問題がある場合、ご連絡をいただければ早急に対応させていただきたいと思います。
