为什么浏览器将换行符呈现为空格?

2024-04-23

很长一段时间以来,我一直想理解为什么浏览器在渲染的 HTML 元素之间有一个 NewLine 时会在它们之间添加一个空格,例如:

<span>Hello</span><span>World</span>

上面的 html 将输出“HelloWorld”字符串without“Hello”和“World”之间有一个空格,但在以下示例中:

<span>Hello</span>
<span>World</span>

上面的 html 将输出一个“Hello World”字符串with“Hello”和“World”之间有一个空格。

现在,我可以毫无问题地接受这就是它的工作方式,但让我有点烦恼的是,我总是觉得 html 元素之间的空格(或换行符)在当时并不重要。浏览器将 html 呈现给用户。

所以我的问题是是否有人知道这种行为背后的哲学或技术原因是什么。

谢谢。


浏览器在渲染时将多个空白字符(包括换行符)压缩为单个空格。唯一的例外是在<pre>元素或那些具有CSS 属性white-space https://developer.mozilla.org/en-US/docs/Web/CSS/white-space set to pre or pre-wrap放。 (或者在 XHTML 中,xml:space="preserve"属性。)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么浏览器将换行符呈现为空格? 的相关文章

  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 绝对定位的 div 中的文本重叠

    在下面的代码片段中 div 元素 main gt div 相对定位并向左浮动 由于相对定位 div 元素 main gt div 彼此相邻放置 span 元素位于 div 元素下方 main gt div gt span span 元素绝对
  • dom 元素转换后 IE 显示水平滚动条

    我在网站的各个地方使用了以下 css http jsfiddle net uycq29mt 1 http jsfiddle net uycq29mt 1 a position absolute background red width 60
  • 右下角对齐的更好方法

    有没有更好的方法来对齐单元格右下角的某些内容 我有一个 div 只包含一个背景图像 10px x 10px 我使用以下样式将其放在右下角 我所在的单元格高 40 像素 这样做会导致我失去 div 上方的 30px 我还使用它作为单击的对象
  • 具有有限行数和字符数限制的文本区域

    我需要具有 TextArea 的功能 1 maximum total lines 6 and 2 in each line there must be maximum of 16 chars 3 if user enters 17th ch
  • 为整个网站设置单个图标

    目前我正在使用这段代码将网站图标添加到网站 但是 必须将此代码添加到每个 HTML 页面中 有谁知道如何设置全局图标 我看过的所有地方都告诉我必须将其添加到每个页面 UPDATE Chrome 在根目录中搜索 favicon ico 文件
  • 限制文本区域中每行的字符数

    我整个周末都在寻找解决这个难题的方法 但尚未找到一个可以正常工作的解决方案 我想要实现的是限制文本区域中每行的字符数 不是相同地限制它们 而是我选择的每行不同的字符数 例如 我只想在我的文本区域中包含 4 行 第 1 2 和 3 行将限制为
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • XPATH 查询、HtmlAgilityPack 和提取文本

    我一直在尝试从名为 tim new 的类中提取链接 我也得到了解决方案 给出了解决方案 片段和必要的信息here https stackoverflow com questions 2982862 extracting a table ro
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • css 计数器在 Internet Explorer 中无法工作以获取隐藏内容 - 如何修复?

    我们想要一些编号列表 并发现了这个很酷的计数器 您可以在 css 中使用它来让浏览器为您计算数字 ol instructions counter reset instructions section ol instructions gt l
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann
  • Jquery,清除/清空 tbody 元素的所有内容?

    我认为这会相当简单 但似乎空方法无法清除我拥有的 tbody 如果有人知道执行此操作的正确方法 我将不胜感激 我只想删除 tbody 中包含的所有内容 到目前为止我正在尝试 tbodyid empty HTML table tbody tr
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • html,将链接显示为普通文本

    我想知道您是否可以将链接显示为普通文本 a href target self img src width 121 height 20 alt div style font size 12px display block font color

随机推荐