Implementation of a "Show More" Button with Line-Based Text Truncation in Responsive Websites

Problem Background and Challenges

In responsive web design, implementing "Show More" functionality for text content is a common requirement, but traditional methods based on fixed height and overflow: hidden face significant challenges in dynamic environments. When container widths change or page layouts adjust dynamically, fixed height values cannot precisely match the specified number of text lines, leading to inconsistent truncation points or content distortion. This necessitates solutions that adapt to varying screen sizes and content changes.

Core Solution: Dynamic Height Control Based on Line Height

To address this, we employ a combination of CSS line-height and height properties. By setting line-height to a fixed value (e.g., 1em) and height to an integer multiple of line-height (e.g., 2em), we ensure the text container always displays exactly the specified number of lines. The key advantage of this approach is its responsiveness: regardless of container width changes, as long as line-height remains constant, the height value accurately corresponds to the target line count.

HTML Structure Optimization

To implement this solution, HTML structure must be optimized. Wrap text content in a dedicated <div> container instead of using <p> tags directly, allowing more flexible styling and control. An example structure is:

<div class="text-container">
    <h1>Title</h1>
    <div class="content hideContent">
        This is the long text content to be truncated, which may include paragraphs, lists, and other elements.
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>

This structure separates content from control logic, laying the foundation for subsequent styling and interaction handling.

CSS Style Implementation

The CSS part uses two key classes for state switching:

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}

In the hidden state (hideContent), the container height is limited to 2em (i.e., twice the line-height), with overflow hidden. In the shown state (showContent), height reverts to auto, displaying all content. Uniform line-height settings ensure cross-browser consistency, as explicit definitions eliminate uncertainties in default line-height handling across browsers.

JavaScript Interaction and Animation

jQuery is used to handle state switching and animation on button click. The switchClass() method smoothly transitions class changes, with dynamic button text updates:

$(".show-more a").on("click", function() {
    var $this = $(this);
    var $content = $this.parent().prev("div.content");
    var linkText = $this.text().toUpperCase();

    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 400);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 400);
    };

    $this.text(linkText);
});

This code handles click events via event delegation, computes the current state, switches the corresponding CSS classes, and updates the button text to reflect the new state. A 400ms animation duration provides smooth visual transitions.

Advantages and Limitations

The main advantages of this solution are its simplicity and responsiveness. By relying on CSS calculations rather than JavaScript dynamic height computations, it reduces performance overhead and ensures layout stability. However, it depends on fixed line-height values; if line-height varies within content (e.g., mixed font sizes), more complex calculations may be needed. Additionally, truncation of non-text content (e.g., images) requires extra consideration.

Alternative: CSS-Only Implementation

As a supplement, a CSS-only solution uses Flexbox and :target pseudo-classes to achieve similar functionality without JavaScript. For example:

.show-hide-text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

This approach directly limits line count via the -webkit-line-clamp property, but has limited compatibility (primarily WebKit-based browsers) and lacks smooth animations. It is suitable for simple scenarios, but for projects requiring broad browser support or complex interactions, the jQuery solution is more reliable.

Practical Recommendations and Extensions

In practice, choose the appropriate solution based on project needs. For scenarios requiring wide compatibility and dynamic control, the line-height-based jQuery solution is recommended, with media queries to adjust line-height for different breakpoints. For modern browsers with simple interactions, consider optimizations using CSS Grid or Flexbox. Extensions could include: adding load-more content, supporting keyboard navigation, or integrating state management with frameworks like Vue.js or React.

Conclusion

By combining CSS line-height control with JavaScript interaction, we have implemented a responsive, extensible "Show More" functionality solution. This approach not only addresses the limitations of traditional fixed-height methods but also provides good user experience and code maintainability. Developers can adjust line-height, animation duration, and interaction details based on specific requirements to suit various design scenarios.