Content Description Truncation

The Content Description Truncation feature automatically detects long content and provides an expandable/collapsible interface with smooth animations and full accessibility support. It is applied to the Collections, Category and Parent Category body templates.

Tip

This feature is designed with progressive enhancement principles, ensuring graceful degradation if JavaScript fails.

This feature provides a clean, accessible way to handle long-form content while maintaining good user experience and performance.

Note

The feature is enabled by default and operates automatically with reasonable defaults. However, you can customize the behavior using data attributes for different content types.

Basic Usage

HTML Structure

<div
    data-max-lines="4"
    disable-compression="true"
    data-expand-text="Read More"
    data-collapse-text="Read Less">
    <!-- Content here -->
</div>

Data Attributes Reference

The Read More Text feature supports several data attributes to customize its behavior:

data-expand-text

Purpose: Customizes the text shown on the expand button

• Default: "Read More"
• Usage: Set on a div element in the content description
• Example: data-expand-text="Show Full Description"

data-collapse-text

Purpose: Customizes the text shown on the collapse button

• Default: "Read Less"
• Usage: Set on a div element in the content description
• Example: data-collapse-text="Show Less"

<div data-expand-text="Show Full Description" data-collapse-text="Show Less">
    <!-- Content here -->
</div>

data-max-lines

Purpose: Overrides the default maximum number of lines before truncation

• Default: 4 lines
• Usage: Set on a div element in the content description
• Example: <div data-max-lines="6"> allows 6 lines before showing the read-more button

<div data-max-lines="6">
    <!-- Content here -->
</div>

disable-compression="true"

Purpose: Completely disables the read-more functionality for specific content

• Usage: Set on a div element
• Effect:
  • Removes line-clamp restrictions
  • Hides the read-more button
  • Shows full content without truncation

<div disable-compression="true">
    <!-- Content here -->
</div>

Accessibility Features

Tip

This feature follows Web Content Accessibility Guidelines (WCAG) standards for inclusive design.

• ARIA Attributes: Uses aria-expanded to indicate state
• Keyboard Navigation: Supports Enter and Space key activation
• Focus Management: Proper focus indicators and outline styles
• Screen Reader Support: Hidden decorative icons with aria-hidden="true"
• Semantic HTML: Uses proper button elements for interactive controls

Troubleshooting

Common Issues

Caution

Here are the most frequently encountered issues and their solutions:

Issue	Solution
Button not appearing	Ensure content exceeds the specified line count
JavaScript errors	Verify data-attributes are present and correct

Debug Mode

Tip

Add this CSS to visualize the truncation behavior:

.category-description[data-expandable="true"] {
    border: 1px dashed red; /* Visual indicator */
}