How to Display Ellipsis in a Span with Hidden Overflow in CSS?

Displaying Ellipsis in a Span with Hidden Overflow

In CSS, the overflow property determines what happens when an element's content overflows its bounds. In the given scenario, the CSS for a span element hides any overflowing content. This results in the content being cut off, as observed in the code snippet.

To address this issue, you can utilize the text-overflow property, which controls how overflowing text should behave. By setting text-overflow to ellipsis, you can specify that any overflowing text should be replaced with an ellipsis (...). This will allow you to display a portion of the text within the span while indicating that there is more.

Here's how you can modify your CSS to achieve the desired result:

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

This updated CSS will display the text within the span element, up to 180 pixels in width. Any remaining text will be replaced with an ellipsis.

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