1

在处理我的项目时，我发现\n在 html 源代码中显示为浏览器中这两行之间的空格。例如，

a
b

在浏览器中显示为a b. 如何在不删除换行符的情况下避免这个“空格”？我想要的结果是ab彼此相邻的——不是在单独的行上，也不是在它们之间有空格。

我使用 php 即时生成相当大的表单，为了便于阅读，我使用的格式PHP_EOL与 相同\n，但在浏览器中会出现额外的空格。我想摆脱他们。

4

5 回答 5

4

更新答案：

在下面的评论中，您说您正在寻找的结果是“ab”彼此相邻，它们之间根本没有空格或换行符。

如果 "a" 和 "b" 真的是text，我不相信你有任何选择，如果你想让它们彼此相邻，你必须删除换行符。（我意识到你说过你不想那样做，我只是说，我认为你别无选择。）

如果“a”和“b”是元素（你说过你正在输出一个大表单），你可以玩负 CSS 边距的游戏，但它会很快变丑。或者将该换行符移动到标签中的旧技巧，例如：

<input name="a" type="text"
><input name="b" type="text"
>

不显示标记内的换行符（因为它在标记中，而不是文本中）。

下面关于元素间空白的链接也可能会有所帮助，具体取决于您的整体标记；基本上浏览器有时会忽略元素之间的空白，因此您可以稍微调整一下以使其做到这一点。

您说过您使用它是为了提高可读性。我想另一种选择，虽然它真的很冗长，是把换行符放在评论中：

form field here<!--
-->next form field here<!--
-->next form field here

...但同样，非常冗长（并且可能对可读性没有太大作用）。

你最好的选择是你说你不想要的：删除换行符。:-)

原始答案：

（从不清楚您是否希望“ab”彼此相邻的时候开始；几乎每个人都认为您希望显示换行符。）

为什么在源代码中使用“\n”时浏览器中会显示空格？

因为 HTML 标准规定所有空白字符序列（除了元素间空白）都被视为单个空格。因此对于 HTML，换行符、空格、制表符、回车符和换页符都是完全相同的：它们显示为空格。

如何在不删除换行符的情况下避免这个“空格”？

有几种方法：

  1. 您可以使用一个br元素：

    a<br>b

  2. 您可以将a和b放在使用块显示的单独p容器中（默认情况下两者都div做，您可以使用 CSS 应用display: block到其他容器）。

    <p>a</p>
<p>b</p>

    或者

    <div>a</div>
<div>b</div>

    ETC

  3. 如果您确实希望将该换行符视为换行符，则可以使用一个pre元素，该元素对预格式化文本具有特殊处理

    <pre>a
b</pre>

    white-space...并且您可以使用 CSS 的样式（值pre、、pre-wrap和）对其他元素应用相同类型的处理pre-line。

于 2012-05-16T17:48:42.787 回答
0

在 html 中使用空间</br>而不是 \n。\n 在代码中用于换行。

于 2012-05-16T17:47:44.847 回答
0

\n 可能不是“显示”新行所需的唯一字符。

根据平台 \n 可能只在代码中或在代码和视觉输出中为您提供换行符。某些平台要求 \r 具有可视回车符。在某些情况下，您甚至可能需要 \r\n 才能获得所需的输出。

进一步阅读 SO > \r 和 \n 有什么区别？

于 2012-05-16T18:05:28.533 回答
0

如果您不想在渲染输出中出现空白，请不要将其放入输入中 - 就这么简单。或者，生成可读性极好的 xml 作为中间步骤，并使用 xslt 将其处理为没有不需要的空白的 html。

注意：建议用户在此答案中插入适当<sarcasm>的标签；）

于 2012-05-16T18:07:34.027 回答
-3

用一些像这样的内联标记包围它们

<span>a</span
><span>b</span>
于 2012-05-16T17:46:41.927 回答