はてなブクマを眺めていたら気になるところがあった

今日も楽しくはてなブクマを眺めていたらふと気付いた。

あれ？タイトル(aタグ)がはみ出てる

「！！！！！！！」が悪さをしてるみたい？

因みにcssはこんな感じだった。

contents.css

div.entry-contents h3 a {
    padding: 8px 0;
    color: #303030;
    text-decoration: none;
    word-break: break-all;
}

面白いと思ったので、解決方法を考えてみた

といってもword-break: break-word;にしただけだけど。

contents.css

div.entry-contents h3 a {
    padding: 8px 0;
    color: #303030;
    text-decoration: none;
    word-break: break-word; /* break-all -> break-word */
}

これですっきり。

久々にCSSの復習にもなったので参考サイトも貼っておく。 developer.mozilla.org

＋ 2018/02/01 10:50時点の話でした～～～