Word-break, if hyphened

Question

Codepen

I'm trying to avoid word-breaks, in my .threadTitle, by using display: inline-block. This works, however when adding a hyphen inbetween two letters will it will cause a break anyways.

---

---

Neither word-break: keep-all nor display: inline-block has the desired effect.

  .threadTitle {
    position: relative;
    display: inline-block;
    word-break: keep-all;  
    flex: 1 1 0;
    overflow: hidden;
  }

Answer 1

This is mostly a Unicode problem, not an HTML one. You need to use non-breaking hyphens (‑, U+2011) instead of a normal hyphens:

<p>This-is-a-really-long-sentence-separated-by-breaking-hyphens-that-will-be-split-among-various-lines.</p>
<p>This&#8209;is&#8209;a&#8209;really&#8209;long&#8209;sentence&#8209;separated&#8209;by&#8209;non&#8209;breaking&#8209;hyphens&#8209;that&#8209;won't&#8209;be&#8209;split&#8209;among&#8209;various&#8209;lines.</p>

This is useful for making sure hyphenated words are never broken between two lines.

---

If you don't want wrapping at all, use white-space: nowrap;, as Ori Drori's answer suggests.

p {
  white-space: nowrap;
}

<p>This is a really long sentence separated by breaking (normal) spaces that won't be split among various lines because <code>white-space: nowrap;</code> is being used.</p>

Answer 2

use white-space: nowrap; to prevent text wrapping:

.threadTitle {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  flex: 1 1 0;
  overflow: hidden;
}

<h1 class="threadTitle">Thread-Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</h1>