How to Implement Ellipsis (\"...\") for Text Overflow in CSS?

How to Display Ellipsis ("...") for Text Overflow in CSS

When dealing with text that exceeds the available space, it's common to need a visual indicator to suggest that more content is available. This can be achieved by showing dots (ellipsis) in the span element using CSS.

To enable this functionality, follow these steps:

1. Ensure Overflow is Hidden:
   Use the overflow: hidden !important; property to hide the overflowing text.
2. Use Text Overflow:
   Add the text-overflow: ellipsis; property to indicate that the text should be trimmed with ellipsis (...) when it overflows the available space.
3. Optional: White-Space Control:
   To prevent line wrapping and ensure that the ellipsis appears after the last character, set white-space: nowrap;.

Here's a code example:

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

<code class="html"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span></code>

By implementing these CSS properties, you can effectively display ellipsis in a span element with hidden overflow, indicating that there's more text available beyond the visible range.

The above is the detailed content of How to Implement Ellipsis (\"...\") for Text Overflow in CSS?. For more information, please follow other related articles on the PHP Chinese website!