How Can I Display an Ellipsis in an Overflowing Span?

Displaying Ellipsis in Overflowing Spans

To show dots ("...") in a span with hidden overflow, you can utilize the text-overflow: ellipsis property. It truncates overflowing text and displays an ellipsis instead.

Here's how you can implement it:

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

In this snippet:

• display: inline-block allows the span to take up inline space while still being block-like.
• width: 180px sets the width of the span to 180 pixels.
• white-space: nowrap prevents wrapping of the text within the span.
• overflow: hidden !important ensures that the content is hidden when it overflows the span's width.
• text-overflow: ellipsis truncates the text and displays an ellipsis when the content overflows.

By combining these properties, you can display an ellipsis in your span, indicating that there's more content that's hidden from view.

The above is the detailed content of How Can I Display an Ellipsis in an Overflowing Span?. For more information, please follow other related articles on the PHP Chinese website!