p元素内的内容包裹在元素外面 [英] contents inside p element wraps outside the element

问题描述

 < p class =foo>< ;? php echo $ foo-> data; ？>< / p为H. 
  

在浏览器中显示如下：

 < p class =foo>< / p> 
< p> foo dataription here< / p> 
< p>< / p> 
  

但是，如果我只是这样使用：

 <？php echo $ foo-> data; ？> 
  

然后，它正确地呈现这样的DOM元素：

 < p> foo此处的说明< / p> 
  

为何不< p class =foo><< p ;？php echo $ foo-> data;

 < p class？>< / p> 不会像下面那样呈现吗？ =foo> foo此处描述< / p> 
  

解决方案

我注意到 $ foo - > data 带有< p> 的html标记。但是像div或p这样的块级元素不能驻留在p元素中。

因此，

 < p class =foo> ; 
< p> foo此处的说明< / p> 
< / p> 
  

由浏览器渲染，如下所示：

 < p class =foo>< / p> 
< p> foo此处的说明< / p> 
< p>< / p> 
  

因为它正在解开块级元素，即 p 元素在 p.foo 元素之外。这只是因为我们不能在语义上在 p 元素中嵌套任何块级元素。

所以，当你'重新插入p元素中的任何内容以确保 p 元素中没有任何块级元素。

p元素只能包含措辞内容。

表述内容是文档的文本，以及在段落内标记文本的元素。它们是：
$ b

，abbr，area（如果它是地图元素的后代），audio，b，bdi，bdo，数字，数字，德尔，dfn，em，嵌入，我，iframe，img，输入，插入，kbd，keygen，标签，地图，标记，数学，米，noscript，对象，输出，进度，q，红宝石，s，samp，脚本，选择，小，span，强，sub，sup，svg，模板，textarea，时间，u，var，视频，wbr，文本

希望这可以帮助更多用户。

I am using the following code in php application.

<p class="foo"><?php echo $foo->data; ?></p>

Which is rendered in the browser like below:

<p class="foo"></p>
<p>foo dataription here</p>
<p></p>

But if I use just like this:

<?php echo $foo->data; ?>

Then, it correctly renders the DOM element like this:

<p>foo description here</p>

Why doen't <p class="foo"><?php echo $foo->data; ?></p> doesn't renders like below?

<p class="foo">foo description here</p>

解决方案

I noticed that $foo->data carries the html tag with <p>. But any block level element like div or p cannot reside within p element.

Thus,

<p class="foo">
   <p>foo description here</p>
</p>

is rendered by browser like this:

<p class="foo"></p>
<p>foo description here</p>
<p></p>

As it's unwrapping the block level element i.e. p element outside the p.foo element. It's just because we cannot nest any block level element within p element semantically.

So, be careful when you're inserting any content inside p element to assure that there's no any block level element within p element.

p element can only contain the phrasing content.

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. They are:

a, abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Text

Hope, this helps for further users.

这篇关于p元素内的内容包裹在元素外面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！