我怎样才能让浏览器允许行内元素之间的换行符（它们之间没有空格）？

Question

假设我有一些display: block容器，我想用display: inline元素（如<span>标签）填充它（以编程方式）。 这些元素中的每一个都应该被视为一个“单词”，因此当它们到达父元素的右边缘时，它们应该通过在元素之前插入换行符换行，否则会溢出到右侧。

我可以通过在每个元素后放置一个空格来手写 HTML 来做到这一点。 当以编程方式填充父级时，这有点烦人和混乱，因为我必须开始处理父级的实际文本内容，而不是仅仅弹出和插入节点（假设我可能需要以编程方式以任何顺序删除和插入节点）。

我有点希望父级有一个 CSS 属性，上面写着“出于元素流的目的处理任何元素的结尾，如空格”，但我会采用任何干净的解决方案。

这是我想要的一些例子（截图）。 该代码段包含div标记。 第一个是按我想要的方式运行，但以我不想要的方式实现（只是在 HTML 的跨度之间放置空格）。 第二个不是我想要的行为 - 因为跨度之间没有空格，所以浏览器不会在它们之间换行。

 div { width: 200px; background-color: pink; margin-bottom: 10px; } span { width: 80px; background-color: cyan; }

 <div> <span>text</span> <span>text</span> <span>text</span> <span>text</span> <span>text</span> <span>text</span> </div> <div><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

Answer 1

无需在 span 标记之间插入空格即可实现所需行为的一种方法是将父容器的显示属性设置为 flex，并将 flex-wrap 属性设置为 wrap。 这将导致子元素在到达父容器的边缘时换行到下一行，就像您正在寻找的那样。

您也可以使用 inline-block 而不是 inline，因为这会将元素视为内联元素，但也会尊重元素上设置的宽度和高度。

 div { width: 300px; background-color: pink; display: flex; flex-wrap: wrap; } span { width: 80px; background-color: cyan; display:inline-block }

 <div> <span>text</span> <span>text</span> <span>text</span> <span>text</span> <span>text</span> <span>text</span> </div> <div><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

然后，您可以以编程方式插入和删除 span 元素，它们仍会根据需要换行到下一行。

Answer 2

以下是可能对您有用的 2 个想法：

1. 通过使用 flex + 添加填充到<span>来使用 css
2. 或者如果你只需要一个空格，你可以简单地 append 你的<span>的前后一个空格

 // Second Example for (let i = 0; i < 8; i++) { const element = document.querySelector('.parent-2'); element.innerHTML = element.innerHTML + " <span>text</span>" }

 /* First Example */.parent-1 { display: flex; flex-flow: row wrap; }.parent-1 span { padding-right: 4px; }.parent { width: 200px; border: 1px solid red; margin-bottom: 10px; }

 <!-- First Example --> <div class="parent parent-1"><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div> <!-- Second Example --> <div class="parent parent-2"></div>