我怎樣才能讓瀏覽器允許行內元素之間的換行符（它們之間沒有空格）？

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>