主页 / coding / 问题 / 79565086
Accepted
leetbacoon
Asked: 2025-04-10 02:31:26 +0800 CST

使用美观的 HTML 格式避免尾随空格

  • 772

我们正在尝试 HTML 4.01（以及 CSS3），根据我们之前的编程经验，我们倾向于以美观的方式打印源代码。例如：

<body>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.
  </p>
</body>

我们面临的问题是，如果渲染的行</p>与最后一个单词不对齐，则后面会有一个空格，例如上面的代码：

这是此格式化文档中的一个段落，将呈现为一行。 

（突出显示文本，将出现尾随空格。）

<a>我们发现和<img>标签就是这种情况。

除了将结束（和可能的开始）标签移动到实际数据的开头和结尾之外，还有什么不使用 Javascript 的选项可以用来防止出现尾随空格吗？

我们最初考虑使用 CSS3 解决方案，但研究显示这种方式不可行——所有研究均未成功。

html

2 个回答

  1. Best Answer

    需要注意的是，这种行为似乎是 Firefox 独有的，并且只涉及它们的文本高亮器，我的 Chrome 和 Safari 不会呈现额外的空白，我的 Firefox 不会将其包含在复制的文本中。

    无论如何，在 Firefox 中避免出现这些多余空白的一种方法是在文本节点之后、新行之前放置注释：

    <body>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.
  </p>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.<!-- no white space -->
  </p>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.<!---->
  </p>
</body>

    • 2

  2. 标签内部的 HTML 是数据，所以如果你想更改数据，你需要进行一些编程来实现。我知道你不想用 JavaScript 来实现，但即使你不这样做，理解这个概念也很重要。首先是一个 JavaScript 示例，然后再进行更通用的解释。

    let items = document.querySelectorAll("a, p");
for (let item of items) {
    console.log(item.innerHTML.length);
    item.innerHTML = item.innerHTML.trim();
    console.log(item.innerHTML.length);
}
    <p> abc </p>
<a> def </a>

    你会看到，我们得到了innerHTML，它的length初始值为 5，但修剪后 alength为 3。这就是你需要应用的逻辑。如果你使用 C#、PHP、Java、C++ 或其他语言，那么你可以应用其他方法。但这个逻辑确实是修剪的。

    如果你能理解为什么你不喜欢 JavaScript，那就太好了。无论是个人不喜欢这门语言（在这种情况下，换用其他语言或许是个解决方案），还是其他原因。然而，如果没有自动化执行程序，你就无法自动完成数据修剪。

    • 0

相关问题