CODEWITHSUNDEEP
htmlcssoverflowcss-hyphens
cts
cts

Reputation: 1084

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 &shy;, 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

Upvotes: 0

Views: 76

Answers (1)

Paulie_D
Paulie_D

Reputation: 115300

Use a non-breaking hyphen &#8209; or &#x2011;

.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>

Upvotes: 1

Related Questions