Format text that is splitted accross span that aren't on the same level

26 Views Asked by At

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 ?

0

There are 0 best solutions below