如何使跨度填充当前行的空白空间并继续在下一行显示剩余文本

Question

In the below code snippet example, after marked word science and theory there is a empty space at the end.在下面的代码片段示例中，在标记词science和theory之后，最后有一个空格。 Forcing the next span element to appear on the newline.强制下一个 span 元素出现在换行符上。

How to make the next span element after marked word to fill the empty space .如何使next span element after marked word to fill the empty space 。 and then the remaining words of that span should continue display on new line?然后该跨度的剩余单词应该继续显示在新行上？

So that the whole text looks like a description with tagged words on it.这样整个文本看起来就像一个带有标记词的描述。

 <!DOCTYPE html> <html> <style> mark{ display:flex; flex-direction:column-reverse; } div{ display:flex; flex-flow: row wrap; align-items: flex-end } </style> <body> <div dir="auto" style="line-height: 2.5;"> <span data-start_offset="0" data-end="41" style="white-space: break-spaces;">Metaphysics continues asking "why" where </span> <span> <span style="display: flex;"> <mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" data-start_offset="41" data-end="48" style="color: rgb(0, 0, 0); background: rgb(173, 164, 189); opacity: 1; position: relative; padding: 0px 4px; cursor: pointer;">science <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(173, 164, 189); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class1</span> <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(173, 164, 189); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class2</span> </mark> <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete" style=" align-items: flex-end; "><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path></svg></span><span class="MuiTouchRipple-root"></span></button> </span> </span> <span data-start_offset="48" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based of fundamental physics is based of fundamental physics is based</span> <span> <span style="position: relative;"> <mark id="977c207e-92ca-4176-af01-0b6b01afe578" data-start_offset="78" data-end="84" style="color: rgb(0, 0, 0); background: rgb(231, 131, 210); opacity: 1; position: relative; padding: 0px 4px; cursor: pointer;">theory <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(231, 131, 210); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class3</span> <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(231, 131, 210); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class4</span> </mark> </span> </span> <span data-start_offset="84" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based on some set.</span> </div> </body> </html>

Answer 1

Remove display: flex from the outer <div> and use display: inline-flex;从外部<div>中删除display: flex并使用display: inline-flex; to make your span elements display inline like a <span> .使您的 span 元素像<span>一样内联显示。

display: flex; makes the element display as a block element (ie it will behave like a <div> which is what you're seeing).使元素显示为块元素（即，它的行为类似于您所看到的<div> ）。

Here is a simplified version of your markup showing where to make the change:这是您的标记的简化版本，显示了在哪里进行更改：

<!-- use `display: inline-flex;` instead -->
<span style="display: flex;">
  <mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" ...>science 
  
  <span style="...">class1</span>
  
  <span style="...">class2</span>
  </mark>
  <button class="MuiButtonBase-root ..."></button>
</span>

Updated to use inline-flex :更新为使用inline-flex ：

<span style="display: inline-flex;">
  <mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" ...>science 
  ...
</span>

Here's a runnable example:这是一个可运行的示例：

 <!DOCTYPE html> <html> <style> mark{ display:flex; flex-direction:column-reverse; } </style> <body> <div dir="auto" style="line-height: 2.5;"> <span data-start_offset="0" data-end="41" style="white-space: break-spaces;">Metaphysics continues asking "why" where </span> <span> <span style="display: inline-flex;"> <mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" data-start_offset="41" data-end="48" style="color: rgb(0, 0, 0); background: rgb(173, 164, 189); opacity: 1; position: relative; padding: 0px 4px; cursor: pointer;">science <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(173, 164, 189); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class1</span> <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(173, 164, 189); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class2</span> </mark> <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete" style=" align-items: flex-end; "><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path></svg></span><span class="MuiTouchRipple-root"></span></button> </span> </span> <span data-start_offset="48" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based of fundamental physics is based of fundamental physics is based</span> <span> <span style="display: inline-flex;"> <mark id="977c207e-92ca-4176-af01-0b6b01afe578" data-start_offset="78" data-end="84" style="color: rgb(0, 0, 0); background: rgb(231, 131, 210); opacity: 1; position: relative; padding: 0px 4px; cursor: pointer;">theory <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(231, 131, 210); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class3</span> <span style="font-size: 0.7em; line-height: 1.5; background-color: rgb(231, 131, 210); opacity: 1; left: 0px; padding: 0px 5px; font-style: italic; pointer-events: none; top: -11px; font-weight: bold; margin-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">class4</span> </mark> </span> </span> <span data-start_offset="84" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based on some set.</span> </div> </body> </html>

Answer 2

span is an important and widely used inline element in HTML document. span 是 HTML 文档中一个重要且广泛使用的内联元素。 It is used to contain other inline elements, or textual content.它用于包含其他内联元素或文本内容。 Then you can just display:block;然后你可以只display:block; to your span到你的跨度

如何使跨度填充当前行的空白空间并继续在下一行显示剩余文本

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-06-27 04:52:16

解决方案2
0 2022-06-27 05:01:36

如何使跨度填充当前行的空白空间并继续在下一行显示剩余文本

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-06-27 04:52:16

解决方案2 0 2022-06-27 05:01:36

解决方案1
1 已采纳 2022-06-27 04:52:16

解决方案2
0 2022-06-27 05:01:36