In the below code snippet example, after marked word science and theory there is a empty space at the end. Forcing the next span element to appear on the newline.
How to make the 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.
JavaScript
x
48
48
1
<!DOCTYPE html>2
<html>3
4
<style>5
mark{6
display:flex;7
flex-direction:column-reverse;8
}9
10
div{11
display:flex;12
flex-flow: row wrap;13
align-items: flex-end14
}15
</style>16
<body>17
18
<div dir="auto" style="line-height: 2.5;">19
<span data-start_offset="0" data-end="41" style="white-space: break-spaces;">Metaphysics continues asking "why" where </span>20
<span>21
<span style="display: flex;">22
<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 23
24
<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>25
26
<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>27
</mark>28
<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete" style="29
align-items: flex-end;30
"><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>31
</span>32
</span>33
<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>34
<span>35
<span style="position: relative;">36
<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 37
38
<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>39
40
<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>41
</mark>42
</span>43
</span>44
<span data-start_offset="84" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based on some set.</span>45
</div>46
47
</body>48
</html>Advertisement
Answer
Remove display: flex from the outer <div> and use display: inline-flex; to make your span elements display inline like a <span>.
display: flex; makes the element display as a block element (i.e. it will behave like a <div> which is what you’re seeing).
Here is a simplified version of your markup showing where to make the change:
JavaScript
1
11
11
1
<!-- use `display: inline-flex;` instead -->2
<span style="display: flex;">3
<mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" >science 4
5
<span style="...">class1</span>6
7
<span style="...">class2</span>8
</mark>9
<button class="MuiButtonBase-root ..."></button>10
</span>11
Updated to use inline-flex:
JavaScript
1
5
1
<span style="display: inline-flex;">2
<mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" >science 3
4
</span>5
Here’s a runnable example:
JavaScript
1
43
43
1
<!DOCTYPE html>2
<html>3
4
<style>5
mark{6
display:flex;7
flex-direction:column-reverse;8
}9
10
</style>11
<body>12
13
<div dir="auto" style="line-height: 2.5;">14
<span data-start_offset="0" data-end="41" style="white-space: break-spaces;">Metaphysics continues asking "why" where </span>15
<span>16
<span style="display: inline-flex;">17
<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 18
19
<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>20
21
<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>22
</mark>23
<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete" style="24
align-items: flex-end;25
"><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>26
</span>27
</span>28
<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>29
<span>30
<span style="display: inline-flex;">31
<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 32
33
<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>34
35
<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>36
</mark>37
</span>38
</span>39
<span data-start_offset="84" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based on some set.</span>40
</div>41
42
</body>43
</html>