[SOLVED] Preventing hyphenated words from breaking separately on overflow

Preventing hyphenated words from breaking separately on overflow

I have the following simple code that limits text to two lines and displays an ellipsis to indicate more content exists if applicable.

I have an issue however that hyphenated words such as "breath-taking" are not being treated as one word, and is (depending on view size) often appearing as "breath-..." at the end of the second line.

Either the entirety should be shown "breath-taking", or none at all.

.container {
  border: 1px solid green;
  width: 350px;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: unset;
}

<div class="container">
  <p>
    Take to the skies to experience the breath-taking views.
    Take to the skies to experience the breath-taking views. Take to the skies to experience the breath-taking views.
  </p>
</div>

I have investigated the option of using , various hyphen properties and the popular question on SO: How to break word after special character like Hyphens (-) but to no avail, any insight would be appreicated

Solution

Use a non-breaking hyphen ‑ or ‑

.container {
  border: 1px solid green;
  width: 350px;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: unset;
}

<div class="container">
  <p>
    Take to the skies to experience the breath&#8209;taking views.
    Take to the skies to experience the breath&#8209;taking views. Take to the skies to experience the breath-taking views.
  </p>
</div>