如何在一个单词内部有一个跨度而不会破坏它？

Question

我正在制作带和弦的歌词。如果我将一个和弦（作为一个跨度）放在一个单词中以进行精确定位，则意味着如果该行换行，该单词将会分成两半。我怎么能把这个词放在一起？

小提琴：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/

Answer 2

尝试：

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

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

Answer 3

你可以通过在HTML代码中不想破坏的各个地方添加一个不间断的空格标记来保持一致：

1. 使用This is not A convenient but efficient way to prevent line breaks

示例：

<nobr>

将显示（在同一行上不破坏）： 这并不是防止换行符一种方便而有效的方式

1. 使用<nobr> The tag should enclose the word or sentence you don't want to break</nobr> 这是一个非标准的元素，但在我使用的一些浏览器（IE，Firefox，）中工作，我相信它对大多数人都有效。

{{1}}

将在不打破的情况下一起显示您想要的单词。 希望这有帮助