<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ip­sum do-
</span>
<span style="display: inline-block; vertical-align:top;">
lor sit amet
</span>
</div>You can try this
Solution 1 :
Solution 2 :
I found a solution myself – simply use display: flex; on the parent.
<div style="width: 140px; display: flex;">
<span>1️</span>
<span>
Lorem ip­sum do­lor sit amet
</span>
</div>Problem :
I have the following HTML-code:
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ip­sum do­lor sit amet
</span>
</div>The problem: CSS doesn’t treat ­ like a normal linebreak, and therefore the whole text goes in it’s own line, instead of “Lorem ipsum do-” being in line with the “1️”.
This is what i want it to look like:
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum do-<br>lor sit amet
</span>
</div>How do I achieve this?
Comments
Comment posted by FireFuro99
Nope, in your solution the “lor” is below the 1️, but i want it to be right of the 1️ . See my second example, that’s EXACTLY what it should look like. And I don’t want any
or in the text itself, just . But i don’t know how to make CSS automatically split the text at , instead of putting it all in a new line.