html - 如何在不破坏包装的情况下在单词内有一个跨度？

Question

我正在制作带有和弦的歌词表。如果我将和弦(作为一个跨度)放在一个词中以进行精确定位，这意味着如果该行换行，该词将分成两半。我怎样才能把这个词放在一起？

fiddle :https://jsfiddle.net/96h8kfw9/

代码:CSS

.chord {
    display: inline-block;
    height: 34px;
    width: 0px;
    color: blue;
    white-space: pre;
}
.line {
    min-height: 12px;
    width: 285px;
}

.line-text {
    vertical-align: bottom;
    white-space: pre-wrap;
}

HTML

<div class="line">
<span class="line-text">
  Hello this is a line that wraps with a brok<span class="chord">C#</span>en word.
</span>
</div>

编辑:我确实想要换行，但总的来说，不要把一个词分成两半。

Answer 1

这个怎么样？

.chord {
  vertical-align: bottom;
  white-space: pre;
}

.chord span {
  display: inline-block;
  height: 34px;
  width: 0px;
  color: blue;
  white-space: pre;
}

.line {
  min-height: 12px;
  width: 285px;
}

.line-text {
  vertical-align: bottom;
}

编辑:更新以删除空白:在 .line-text 类上预换行以停止行首出现空格。

https://jsfiddle.net/richjava/n1ro4o1a/