如何阻止Google Translate修改HTML结构及星号换行问题

Hey there! Let’s dig into those frustrating Google Translate problems you’re dealing with—modifying your HTML structure and pushing asterisks to new lines can mess up your layout big time. Here are practical workarounds to tackle both issues:

1. Stop Asterisks from Breaking to New Lines #

Google Translate sometimes misinterprets asterisks as formatting markers (like list bullets) or splits them from adjacent text. Try these fixes:

• Use HTML entities instead of raw asterisks
  Replace * with its HTML entity *. This tells Translate to treat it as a regular character, not a formatting symbol:

  <p>Campo obligatorio&#42;</p>
  

• Force no-wrap with CSS
  Wrap the asterisk in a <span> and apply white-space: nowrap to lock it to the preceding text:

  <p>Campo obligatorio <span class="asterisk">*</span></p>
  

  .asterisk {
    white-space: nowrap;
    color: #dc3545; /* Optional: Keep it red for emphasis */
  }
  

• Exclude the asterisk from translation
  Add the translate="no" attribute to the asterisk’s container. This skips translation for the asterisk entirely, keeping it glued to the text:

  <p>Campo obligatorio <span translate="no">*</span></p>
  

2. Prevent Google Translate from Modifying HTML Structure #

Translate often injects extra <span> tags or rearranges element hierarchies. Here’s how to keep your structure intact:

• Mark elements as structure-preserving
  Add the class="notranslate" to any element you don’t want Translate to alter. This tells it to leave the HTML structure alone, even if it translates the text inside:

  <div class="notranslate">
    <p>Your structured content here</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </div>
  

• Target specific containers for translation
  Instead of letting Translate scan your entire page, use the Google Translate API to manually translate only specific sections. This gives you full control over how translated text is inserted into your HTML, avoiding unwanted structure changes.

• Fix structure post-translate with JavaScript
  Listen for the googletranslateelementchange event (triggered when Translate finishes processing the page) and clean up any modified HTML. For example, remove extra spans or restore element nesting:

  document.addEventListener('googletranslateelementchange', function() {
    // Example: Remove unwanted spans added by Translate
    document.querySelectorAll('.goog-text-span').forEach(el => {
      el.replaceWith(el.textContent);
    });
  });
  

Pro Tip #

Combine these solutions for best results! For example, wrap your asterisk in a translate="no" span with white-space: nowrap, and mark critical layout containers with notranslate to keep your HTML intact.

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