Question

我有一个非常简单的PHP脚本，可以回显父DIV中的span标签。由于某种原因，这是非常奇怪的，使用PHP打印跨度导致跨度不遵循div固定宽度！使用精确版本但纯粹使用HTML效果很好。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>
  <?php

       echo '<div style="width:100px;">';

             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';
             echo '<span>Tumblerfacebook</span>';

       echo '</div>';

 ?>
</body>

</html>

Answer 1

当您尝试纯HTML版本时，您可能会将您认为是格式化代码的换行符和缩进语留下，如下所示：

<div style="width:100px;">
    <span>Tumblerfacebook</span>
    <span>Tumblerfacebook</span>
    <!-- etc -->
</div>

示例：http://jsfiddle.net/47U5K/

PHP脚本生成一行，如下所示：

<div style="width:100px;"><span>Tumblerfacebook</span><span>Tumblerfacebook</span><!-- etc --></div>

它不是特定于PHP - 如果您在仅HTML设置中取出换行符和缩进，您会看到相同的效果：http://jsfiddle.net/QtX2r/1/

第一个例子导致一堆隐含的文本注释被放入该行。当浏览器试图决定在哪里打破换行时，它会发现这些文本节点只有空格，并且决定可以在那里断开那条线。

在第二个例子中，由PHP创建的那个，没有好点打破这一行。浏览器将此视为一条巨大的连续线，并且无法确定在何处打破它而不会破坏它。

css属性word-wrap即将发挥作用的地方。如果你告诉它break-word，浏览器知道它可以分解单词以尊重你的外容器宽度。

<div style="width:100px; word-wrap: break-word;"><span>Tumblerfacebook</span><span>Tumblerfacebook</span><!-- etc --></div>

请参阅：http://jsfiddle.net/QtX2r/2/

另一个选择是在每个跨度后引入空格。这为浏览器提供了可以打破界限的点。

<强>文档

MDN word-wrap - https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

Answer 2

你在PHP中回应它们的方式，没有空格。这将导致没有换行符，这将覆盖您的宽度。

当您使用文字版本时，我确定您在没有考虑的情况下放入空格。

使用PHP在固定宽度内回调div内的跨度导致跨度不跟随宽度

2 个答案: