My Objective:
I aim to accomplish the following outcome:
div {
text-align: right;
}
span {
display: inline-block;
background: #000;
color: #fff;
}<div>
<span>abc</span><br/>
<span>Hello world this is some text</span><br />
<span>hello world</span>
</div>However, in the above scenario, I have segmented my lines individually by enclosing each line within a separate span.
I desire to attain the same (or similar) result as above by utilizing a width to specify when a new line should start/end, rather than encapsulating each new line in its own span.
My Attempts So Far:
I've experimented with the following approach:
div {
text-align: right;
}
span {
display: inline-block;
background: #000;
color: #fff;
width: 200px; /* Width to determine where line break should occur */
}<div>
<span>abc</span><br/>
<span>Hello world this is some text hello world</span>
</div>Nevertheless, in the above instance, the black background covers a "block" rather than wrapping around each line of text.
Therefore, how can I make my second snippet behave similarly to the first one?