diff --git a/tildes/scss/_mixins.scss b/tildes/scss/_mixins.scss index 74cbb82..ff21697 100644 --- a/tildes/scss/_mixins.scss +++ b/tildes/scss/_mixins.scss @@ -20,3 +20,16 @@ min-height: 0; } } + +// Forcibly wrap text in the element if it can't be done "naturally", necessary for +// handling long "words" in places like titles that might otherwise mess up the layout +@mixin force-text-wrap-if-needed() { + overflow-wrap: anywhere; + + @supports not (overflow-wrap: anywhere) { + // Only Firefox supports overflow-wrap: anywhere so far, these two rules should be + // fairly similar for other browsers + overflow-wrap: break-word; + word-break: break-word; + } +} diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss index 9743436..47d199a 100644 --- a/tildes/scss/modules/_topic.scss +++ b/tildes/scss/modules/_topic.scss @@ -49,6 +49,8 @@ } .topic-title { + @include force-text-wrap-if-needed; + display: inline; margin: 0; margin-right: 0.2rem; @@ -248,6 +250,10 @@ .topic-voting { float: right; } + + header h1 { + @include force-text-wrap-if-needed; + } } .topic-full-byline { @@ -269,9 +275,10 @@ } .topic-full-link { + @include force-text-wrap-if-needed; + display: flex; align-items: first baseline; - word-break: break-all; } .topic-full-content {