如何在HTML中嵌入文本文件，实现HTML5兼容的自适应内容尺寸？

Great question! The <object> tag's fixed dimensions can be frustrating when dealing with dynamic text content. Here are two HTML5-compliant approaches to make embedded text automatically adjust to its content size, no hardcoded width/height required:

Approach 1: Fetch API + <pre> Tag (Recommended for Flexibility) #

Instead of relying on <object>, fetch the text content directly with JavaScript and inject it into a <pre> element. This gives you full control over styling and ensures the element naturally sizes to fit its content.

<div id="text-container"></div>

<script>
// Fetch the text file from your server
fetch('ranking.txt')
  .then(response => {
    if (!response.ok) throw new Error('Failed to load text file');
    return response.text();
  })
  .then(textContent => {
    // Create a <pre> element to preserve line breaks and whitespace
    const textDisplay = document.createElement('pre');
    
    // Add optional styling to match an embedded look
    textDisplay.style.padding = '12px';
    textDisplay.style.border = '1px solid #e0e0e0';
    textDisplay.style.borderRadius = '4px';
    textDisplay.style.whiteSpace = 'pre-wrap'; // Wrap long lines instead of horizontal scroll
    textDisplay.style.fontFamily = 'monospace, sans-serif';
    
    // Insert the text content
    textDisplay.textContent = textContent;
    
    // Add the element to your page
    document.getElementById('text-container').appendChild(textDisplay);
  })
  .catch(error => console.error('Error loading text:', error));
</script>

Why this works: #

<pre> elements automatically expand vertically to fit their content, and white-space: pre-wrap ensures long lines wrap instead of causing horizontal overflow. You can tweak the styles to match your site's design perfectly.

Approach 2: Dynamically Resize <object> Tag #

If you need to stick with the <object> tag, you can use JavaScript to measure the content's dimensions after it loads and adjust the element's size. Note: This only works if the text file is hosted on the same domain (due to browser same-origin policy restrictions).

<object id="embedded-text" data="ranking.txt" type="text/plain"></object>

<script>
const textObject = document.getElementById('embedded-text');

textObject.onload = function() {
  // Access the embedded document's content
  const embeddedDoc = textObject.contentDocument || textObject.contentWindow.document;
  
  // Get the actual content dimensions (add a small buffer to avoid cut-off)
  const contentWidth = embeddedDoc.body.scrollWidth + 16;
  const contentHeight = embeddedDoc.body.scrollHeight + 16;
  
  // Update the object's size to match the content
  textObject.style.width = `${contentWidth}px`;
  textObject.style.height = `${contentHeight}px`;
};
</script>

Key Notes: #

• The onload event waits for the text to fully load before measuring dimensions.
• The extra 16px buffer ensures padding or borders don't cut off content.

General Considerations: #

• Cross-Domain Restrictions: Both methods require the text file to be hosted on the same domain as your HTML page. If it's cross-domain, you'll need to configure CORS headers on the server hosting the text file or use a proxy.
• Styling Control: The <pre> approach gives you far more control over text appearance (font, colors, spacing) compared to the <object> method.

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