JavaScript正则/文本替换：为行数限制元素添加末尾省略号

Great question! Your current approach to limiting text lines via calculating max-height is solid, but adding proper ellipsis (especially targeting the last visible space) does require a bit of JavaScript text truncation logic—pure CSS solutions like -webkit-line-clamp have browser limitations and don’t always play nicely with your direct-element approach. Let’s walk through the optimal implementation step by step.

Core Approach #

Yes, you’ll need to truncate the text and adjust it to place the ellipsis at the last visible space (to avoid splitting mid-word). Here’s why and how:

• Why pure CSS isn’t enough: -webkit-line-clamp only works in WebKit/Blink browsers, requires specific container styling (display: -webkit-box, etc.), and doesn’t give you control over replacing the last space with an ellipsis. Your custom plugin’s direct-element targeting makes a JS-based solution more flexible and cross-browser compatible.
• Key steps:
  1. Calculate the exact max height the element can hold based on line height and max lines.
  2. Use an efficient method (like binary search) to find the longest text snippet that fits within the max height.
  3. Adjust the truncated text to replace the last visible space with your ellipsis (or add it after the last complete word).

Full Implementation Code #

Here’s how to integrate this into your jQuery plugin:

$.fn.lineClamp = function(options) {
  // Merge default settings with user options
  const settings = $.extend({
    maxLines: 3,
    ellipsis: '...',
    preserveWords: true // Toggle to disable word preservation
  }, options);

  return this.each(function() {
    const $el = $(this);
    const originalText = $el.text();
    const elementStyle = window.getComputedStyle(this);
    
    // Calculate base values for height calculation
    const fontSize = parseFloat(elementStyle.fontSize);
    let lineHeight = elementStyle.lineHeight;
    
    // Handle different line-height values (normal, unitless, px)
    if (lineHeight === 'normal') {
      lineHeight = fontSize * 1.2; // Default line-height for "normal"
    } else if (!lineHeight.includes('px')) {
      lineHeight = fontSize * parseFloat(lineHeight);
    } else {
      lineHeight = parseFloat(lineHeight);
    }

    // Account for padding/border if box-sizing is border-box
    const paddingTop = parseFloat(elementStyle.paddingTop);
    const paddingBottom = parseFloat(elementStyle.paddingBottom);
    const borderTop = parseFloat(elementStyle.borderTopWidth);
    const borderBottom = parseFloat(elementStyle.borderBottomWidth);
    const contentMaxHeight = (lineHeight * settings.maxLines) - paddingTop - paddingBottom - borderTop - borderBottom;

    // Set base styles to enable line wrapping and overflow
    $el.css({
      'max-height': `${lineHeight * settings.maxLines}px`,
      'overflow': 'hidden',
      'white-space': 'normal',
      'word-wrap': 'break-word'
    });

    // Exit if text already fits
    if (this.scrollHeight - paddingTop - paddingBottom <= contentMaxHeight) {
      $el.data('originalText', originalText);
      return;
    }

    // Binary search to find the longest text that fits (efficient for long text)
    let low = 0;
    let high = originalText.length;
    let bestLength = 0;

    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      const testText = originalText.substring(0, mid);
      $el.text(testText);

      if (this.scrollHeight - paddingTop - paddingBottom <= contentMaxHeight) {
        bestLength = mid;
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }

    // Truncate to best fit and add ellipsis at last space
    let truncatedText = originalText.substring(0, bestLength);
    
    if (settings.preserveWords) {
      // Find the last space to avoid splitting words
      const lastSpaceIndex = truncatedText.lastIndexOf(' ');
      if (lastSpaceIndex !== -1) {
        truncatedText = truncatedText.substring(0, lastSpaceIndex) + settings.ellipsis;
      } else {
        // Handle case where text is a single long word
        truncatedText = truncatedText.substring(0, bestLength - settings.ellipsis.length) + settings.ellipsis;
      }
    } else {
      // Just truncate directly and add ellipsis
      truncatedText = truncatedText + settings.ellipsis;
    }

    // Apply the final text and store original for potential future use
    $el.text(truncatedText);
    $el.data('originalText', originalText);
  });
};

Key Details to Note #

• Binary search efficiency: Instead of deleting one character at a time (which is slow for long text), binary search cuts the problem size in half each iteration, making it much faster.
• Line-height handling: The code accounts for all common line-height values (normal, unitless numbers, px) to ensure accurate max-height calculation.
• Word preservation: The preserveWords option lets you toggle between splitting at words or just truncating at characters, which is useful for edge cases like long URLs.
• Box-sizing awareness: The code adjusts for padding and border if the element uses border-box (the modern default), so your max-height calculation stays accurate.

Usage Example #

// Limit paragraphs to 2 lines with custom ellipsis
$('.text-element').lineClamp({
  maxLines: 2,
  ellipsis: '...'
});

内容的提问来源于stack exchange，提问作者idealbrandon