INFO: Chrome browser adds SPAN tags in the content

  • Updated

When editing content in Chrome browser, it adds extra SPAN tags to the content.

This is Chrome browser's feature on the contenteditable area. We found a workaround for it by adding a css style in your your site's CSS file.

First, you have to inspect what Chrome adds to your content. For example, if Chrome adds the following to your content:
sample content
You need to add a css definition such as the following.

span { font-size: 1em; }

Another exemple is if Chrome adds the following to your content: 

<span style="font-size:10pt;font-family:Helvetica, Arial, sans-serif; line-height:12pt;>sample content</span>

You would need to add a different css definition to match up its attributes such as this:

span { font-size: 1.2em;font-family: Helvetica, Arial, sans-serif; line-height:2em; }

The idea is to tell Chrome that the styles are already taken care of, so it does not need to add SPAN tags to meet the styles requirement.