gpt4 book ai didi

php - 使用 PHP 在具有固定宽度的 div 内回显 span 会导致 span 不跟随宽度

转载 作者:行者123 更新时间:2023-11-28 16:00:24 26 4
gpt4 key购买 nike

我有一个非常简单的 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>

最佳答案

当您尝试纯 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/

另一种选择是在每个跨度之后引入空格。这为浏览器提供了可以断线的点。

文档

关于php - 使用 PHP 在具有固定宽度的 div 内回显 span 会导致 span 不跟随宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23747776/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com