急にCSSがくずれた話

Chrome CSS

大分前に作ったchrome拡張のCSSがくずれていた。

favurl - Chrome Web Store

確認してみたらpreタグに対しての word-wrap: break-word; が効いていなかった。
html - How do I wrap text in a pre tag? - Stack Overflowによると、CSS3ではwhite-space: pre-wrapと書くのがいいらしく、そう書き換えたら直った。

pre {
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

急に古い書き方が使えなくなったことによって、反映されないCSSが出てきたという話だった。

おもしろ事案だった。