I have the following HTML structure that I can't change:
.parent {
width: 250px;
word-wrap: break-word;
border: 1px dotted;
text-align: right;
}
span,
.contenteditable {
display: inline-block;
word-wrap: normal;
}
<div class="parent">
<div class="contenteditable">
<span>Some text that is the first part of the sentence</span>
</div>
<span>and this is the second part</span>
</div>
So the two span are not on the same level, yet they are part of the same text. Because of this, a line break is always inserted before the last span, but I'd like the text to behave like a single chunk of text, i.e.:
Some text that is the first part of the
sentence and this is the second part
instead of:
Some text that is the first part of the
sentence
and this is the second part
Is this achievable using CSS only ?