Home > Article > Web Front-end > How to Implement 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:
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!