Creating Text Ellipsis with CSS: Displaying "…" for Overflowed Content

Introduction

When dealing with limited space on a webpage, long strings of text can often overflow beyond their container’s bounds. This results in an unclean appearance and potentially cuts off important information from view. To handle this elegantly, we utilize the CSS property text-overflow to add ellipsis ("…") at the end of the truncated text.

In this tutorial, you will learn how to use text-overflow: ellipsis; alongside other CSS properties to ensure that overflowing text is neatly displayed with an ellipsis, indicating there’s more content not visible. This technique can be applied for both single-line and multi-line truncation scenarios.

Single-Line Text Truncation

Single-line text truncation is the most common scenario where you want a string of text to fit within a specific width. When the content exceeds this width, an ellipsis is displayed at the end.

Steps:

  1. Set Up HTML Structure:

    <div class="cut-text">
        I like big butts and I cannot lie.
    </div>
    
  2. Define CSS for Truncation:

    Here, we’ll apply several CSS properties to achieve the desired effect:

    • overflow: hidden; ensures that any content exceeding the bounds of the container is not visible.
    • text-overflow: ellipsis; adds an ellipsis at the point where the text overflows.
    • white-space: nowrap; prevents line breaks, ensuring the entire string is considered a single continuous block.
    • Set a specific width to define when truncation should occur.
    .cut-text { 
        width: 160px; /* Adjust as needed */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    

Explanation:

By setting these properties, the CSS ensures that any excess content is cut off neatly at the specified width and replaced with an ellipsis. This approach works across all major browsers due to widespread support for text-overflow.

Multi-Line Text Truncation

In some scenarios, you might want to truncate text after a specific number of lines rather than based on fixed width.

Steps:

  1. Set Up HTML Structure:

    <div class="multi-line-text">
        The Alsos Mission was an Allied unit formed during World War II to investigate Axis scientific developments, especially nuclear, chemical and biological weapons.
    </div>
    
  2. Define CSS for Multi-Line Truncation:

    To truncate text after a certain number of lines (e.g., three), use the following properties:

    • -webkit-line-clamp specifies the number of lines to display before truncating.
    • -webkit-box-orient must be set to vertical to work with -webkit-line-clamp.
    • The parent element needs a flex or inline-block display.
    .multi-line-text {
        width: 100px; /* Adjust as needed */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Number of lines before truncation */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
    

Explanation:

This method leverages webkit-specific properties to handle multi-line truncation. It’s important to note that this approach is mainly supported in WebKit-based browsers (such as Chrome and Safari). For full cross-browser support, consider using JavaScript or CSS techniques that mimic this functionality.

Conclusion

Text overflow management is crucial for a polished look on any website where space is limited. By employing text-overflow: ellipsis;, you can elegantly handle text that exceeds its container’s bounds. This tutorial covered both single-line and multi-line scenarios, providing the flexibility to apply these techniques in various contexts.

Best Practices:

  • Ensure sufficient width for your containers when applying truncation.
  • Test across different browsers, especially if using webkit-specific properties for multi-line truncation.
  • Use responsive design principles to adapt text truncation settings based on screen size or orientation.

By integrating these CSS techniques into your projects, you can create a user-friendly experience that effectively communicates content limitations while maintaining readability and aesthetics.

Leave a Reply

Your email address will not be published. Required fields are marked *