ブログ
文字列が折り返されない
ホームページの作成中に、長い文字列をddタグの中に記述した個所が、Firefoxでは問題がないのに、Internet Explorer 11ではどうしても折り返されない現象に遭遇しました。
元々文字列内の全単語をspanタグで囲い、以下のようなCSSで問題ないだろうと思っていたところ、Internet Explorer 11で確認した際に発覚しました。
結局、FirefoxでもInternet Exploer 11でも想定通りに表示させるために、以下のようなCSSにしてみました。
この方法は長い文字列がしっかりと折り返され、なおかつ単語の途中で改行されませんが、全単語をspanタグで囲うのが手間です。単語数が多ければなおさらです。
しかし見栄えは良いので、今回はそちらを重視してみました。
想定使用例としては、営業所等が多い企業で営業所名を列挙するといった場合に用いると良いのではないでしょうか。
元々文字列内の全単語をspanタグで囲い、以下のようなCSSで問題ないだろうと思っていたところ、Internet Explorer 11で確認した際に発覚しました。
dd span {
white-space: nowrap;
}
dd span {
display: inline-block;
}
しかし見栄えは良いので、今回はそちらを重視してみました。
想定使用例としては、営業所等が多い企業で営業所名を列挙するといった場合に用いると良いのではないでしょうか。