Browse Source

Forcibly wrap topic titles including long "words"

merge-requests/85/head
Deimos 5 years ago
parent
commit
6f00daba2f
  1. 13
      tildes/scss/_mixins.scss
  2. 9
      tildes/scss/modules/_topic.scss

13
tildes/scss/_mixins.scss

@ -20,3 +20,16 @@
min-height: 0; 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;
}
}

9
tildes/scss/modules/_topic.scss

@ -49,6 +49,8 @@
} }
.topic-title { .topic-title {
@include force-text-wrap-if-needed;
display: inline; display: inline;
margin: 0; margin: 0;
margin-right: 0.2rem; margin-right: 0.2rem;
@ -248,6 +250,10 @@
.topic-voting { .topic-voting {
float: right; float: right;
} }
header h1 {
@include force-text-wrap-if-needed;
}
} }
.topic-full-byline { .topic-full-byline {
@ -269,9 +275,10 @@
} }
.topic-full-link { .topic-full-link {
@include force-text-wrap-if-needed;
display: flex; display: flex;
align-items: first baseline; align-items: first baseline;
word-break: break-all;
} }
.topic-full-content { .topic-full-content {

Loading…
Cancel
Save