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

Susan Sarandon
Release: 2024-10-30 21:20:30
Original
804 people have browsed it

How to Implement Ellipsis (

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>
Copy after login
<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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!