How to Display Ellipses in a Span with Hidden Overflow?

How to Concatenate Ellipses in Content with Overflow Hidden

In this question, a developer expresses a need to display ellipses ("...") in a span element with hidden overflow. They provide a CSS code snippet showcasing the hidden overflow, but not the display of ellipses.

The provided solution suggests utilizing the text-overflow: ellipsis property, which allows for content truncation and the display of ellipses when the element's content exceeds its width. Here's the corrected CSS code:

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

The additional white-space: nowrap property ensures that the content does not wrap onto multiple lines, which can cause ellipses to not appear properly.

The above is the detailed content of How to Display Ellipses in a Span with Hidden Overflow?. For more information, please follow other related articles on the PHP Chinese website!