非同级span文本实现连贯排版，能否仅通过CSS完成？

原始代码 #

HTML结构 #

<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>

初始CSS #

.parent {
  width: 250px;
  word-wrap: break-word;
  border: 1px dotted;
  text-align: right;
}
span,
.contenteditable {
  display: inline-block;
  word-wrap: normal;
}

问题描述 #

两个<span>分属不同层级，但文本属于同一段落。当前排版下第二个<span>前会自动插入换行，且两段文本各自右对齐，无法形成连续的文本块。期望实现如下排版效果：

Some text that is the first part of the
   sentence and this is the second part

解决方案（仅CSS修改） #

修改.contenteditable的display属性，让其融入外部文本流：

.parent {
  width: 250px;
  word-wrap: break-word;
  border: 1px dotted;
  text-align: right;
}
span {
  word-wrap: normal;
}
.contenteditable {
  display: inline; /* 将行内块改为行内元素，消除独立容器特性 */
  word-wrap: normal;
}

原理说明 #

原代码中.contenteditable和外部<span>都设置为inline-block，这会让它们成为独立的行内容器，每个容器会单独参与排版，导致两段文本各自右对齐且分属不同行。将.contenteditable改为inline后，它不再是独立容器，内部<span>的文本会和外部<span>的文本合并成一个连续的文本流，从而实现单个文本块的换行效果，同时保留父元素的右对齐特性。

内容的提问来源于stack exchange，提问作者felix