Truncating Text in CSS | Advanced Techniques

Truncating text means cutting off text at a certain point and replacing the remaining part with an ellipsis (…). This is often used to prevent text from overflowing its container, especially in responsive designs where the available space might vary.

Techniques for Truncating Text

1. Overflow Property:
   • Set the overflow property of the container element to hidden.
   • Ensure the container has a fixed width or height.
   • Set the text-overflow property of the container element to ellipsis.
   
   CSS
   .truncated-text {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; /* Optional: Prevent wrapping */ }
2. Line-Clamp Property:
   • Use the line-clamp property to specify the maximum number of lines of text to display.
   • Combine with overflow: hidden and text-overflow: ellipsis for truncation.
   
   CSS
   .truncated-text {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box; /* For Webkit-based browsers */
       -webkit-line-clamp: 2; /* Adjust the number of lines */
       line-clamp: 2; /* Standard syntax */ }
3. JavaScript-Based Solutions:
   • Use JavaScript to dynamically check the length of the text and truncate it if necessary.
   • This approach offers more flexibility but can be more complex.

Responsive Design Considerations

• Container Width: Ensure the container has a fixed width or uses relative units like em or rem to adapt to screen size changes.
• Media Queries: Use media queries to adjust the truncation behavior based on screen size. For example, you might display more lines of text on larger screens.
• Accessibility: Consider the impact of truncation on accessibility. Ensure that truncated content can still be read or accessed in other ways, such as by expanding the container or providing a “read more” link.

Example: Truncating Text in a Responsive Card

HTML

<div class=”card”>

    <h2 class=”truncated-title”>Long title that might overflow</h2>

    <p class=”truncated-description”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

CSS

.card {

    width: 300px; /* Adjust the width based on your layout */

    margin: 20px;

    padding: 10px;

    border: 1px solid #ccc;

}

.truncated-title,

.truncated-description {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

} By effectively using these techniques, you can truncate text in your responsive web designs to create visually appealing and user-friendly layouts.