jQuery文本宽度检测与换行：如何给段落单行应用textWidth函数？

Hey there! Let's figure out how to get that textWidth() function working for your testLine paragraph and make the automatic wrapping happen.

First, let's make sure your textWidth plugin is fully implemented (since your snippet cuts off). Here's the complete version that properly inherits the target element's font styles to get accurate width calculations:

$.fn.textWidth = function(text, font) {
  // Create a hidden span once to reuse
  if (!$.fn.textWidth.fakeEl) {
    $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  }
  const fakeEl = $.fn.textWidth.fakeEl;
  
  // Apply the font style (use target element's font if not provided)
  fakeEl.css('font', font || this.css('font'));
  // Set the text to measure (use element's text if no custom text is passed)
  fakeEl.text(text || this.text());
  
  // Return the calculated width
  return fakeEl.width();
};

Now, to use this function to wrap your testLine paragraph when its content exceeds a set width, we'll build a helper function that splits the text, measures line widths incrementally, and inserts line breaks when needed. Here's how:

Step 1: Define the wrapping function #

function autoWrapText($element, maxLineWidth) {
  const originalText = $element.text().trim();
  if (!originalText) return;
  
  const elementFont = $element.css('font');
  const words = originalText.split(' '); // Split text into words (adjust for non-space-separated languages like Chinese if needed)
  let currentLine = '';
  let wrappedContent = '';

  words.forEach(word => {
    // Test adding the next word to the current line
    const testLine = currentLine ? `${currentLine} ${word}` : word;
    const testLineWidth = $element.textWidth(testLine, elementFont);
    
    // If the test line exceeds the max width, wrap the current line and start fresh
    if (testLineWidth > maxLineWidth && currentLine) {
      wrappedContent += `${currentLine}<br>`;
      currentLine = word;
    } else {
      currentLine = testLine;
    }
  });
  
  // Add the final line of text
  wrappedContent += currentLine;
  
  // Replace the element's content with the wrapped version
  $element.html(wrappedContent);
}

Step 2: Call the function on your testLine #

// Target your paragraph
const $testLine = $('#testLine');
// Set your max allowed width (use the container's width or a fixed value)
const maxWidth = $testLine.parent().innerWidth(); // Adjust to innerWidth/outerWidth based on your layout

// Run the wrapping logic
autoWrapText($testLine, maxWidth);

Key Notes: #

• Font Consistency: The textWidth function copies the target element's font styles to the hidden span, so width calculations are accurate.
• Non-English Text: If you're working with languages that don't use spaces to separate words (like Chinese), replace the split(' ') with a loop that iterates over individual characters instead.
• Layout Adjustments: Make sure maxLineWidth accounts for any padding/border on the container—use innerWidth() instead of width() if you need to exclude padding.

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