阻止Chrome包装已加入的内容< p>用< span> [英] Prevent Chrome from wrapping contents of joined <p> with a <span>

问题描述

我观察到Chrome中的一种不良行为，通过删除它们之间的分隔来加入两个< p> 时发生。尽管< p> 标签已正确连接，但Chrome会将最右边的< p> 标签的内容a < span> 。

编辑：这发生在所有块元素上，而不仅仅是 p 标签。 / b>

示例：

例如，当将

  
 
 
  contenteditable =true>< p> p one。< / p>< p> p two。< / p>< / div> 
  

成为：



 < div contenteditable =true>< p> p one。< span style =font-size：16px; line-height：1.44;> p two。<跨度>< / p为H. 
  

小提琴中的示例：< p> 的内容与< span> 进行了包装。

问题：

有没有一种简单的方法可以防止chrome执行此操作？它导致可怕的标记，我想非常想摆脱。

解决方案

有一种方法，但您需要积极设置几种风格。这个想法是告诉Chrome，样式已经被处理，所以它不需要添加SPAN来满足样式要求。
基本上，您需要将chrome添加样式添加到您的contenteditable div下的span类（请参阅下面的示例）。

编辑小提琴

例如：

• 我在contenteditable DIV中添加了一个edit类
  
• 我添加了一个 .edit p，span



这变成了：

  .edit {
 border：1px solid gray; 
 padding：10px; 
} 
 .edit p，span {
 line-height：1.44; font-size：16px; 
} 
  

和DIV：

 < div contenteditable =trueclass =edit> ...< / div> 
  

请注意，您通常不需要 font-size：16px; 。我需要添加这一个，因为小提琴在contenteditable中定义了一些字体大小。在一个独立的页面上，我不需要它。

你需要将这个Chrome'补丁'应用于任何发生的元素（所以如果你需要UL，OL。然后按照上面的示例逻辑添加所需内容）

I have observed an undesirable behaviour in Chrome that occurs when one joins two <p>'s by deleting the separation between them. Although the <p> tags are joined properly, Chrome wraps the right-most <p> tag's content with a <span>.

Edit: this happens for all block elements, not just p tags.

Example:

For example, when the separating </p><p> are deleted from the following block:

<div contenteditable="true"><p>p one.</p><p>p two.</p></div>

It becomes:

<div contenteditable="true"><p>p one.<span style="font-size: 16px; line-height: 1.44;">p two.</span></p>

Example in a fiddle: Chrome wrapping contents of joined <p> with a <span>.

Question:

Is there an easy way to prevent chrome from doing this? It results in horrible markup that I'd like very much to be rid of.

解决方案

There is a way but you need to pro-actively set a few styles. The idea is to tell Chrome that the styles are already taken care of, so it doesn't need to add SPAN to meet the styles requirement. basically, you need to add the chrome added styles to a span class under your contenteditable div ( see example below).

Edited fiddle

For you example:

• I added an "edit" class to the contenteditable DIV
• I added an .edit p, span class in the style

This becomes:

.edit {
  border: 1px solid gray;
  padding: 10px;
}
.edit p, span {
  line-height: 1.44; font-size: 16px;
}

And the DIV:

<div contenteditable="true" class="edit">...</div>

Note that you normally don't need the font-size: 16px;. I needed to add this one because fiddle defines some font size in contenteditable. On a standalone page I didn't need it.

You need to apply this Chrome 'patch' to any elements where it happens (so if you need UL, OL... then add what is needed following my example logic above)

这篇关于阻止Chrome包装已加入的内容&lt; p&gt;用&lt; span&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！