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

Question

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

代码： 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 {
    height: 34px;
    width: 0px;
    color: blue;
}
.line {
    min-height: 12px;
    width: 285px;
    white-space: nowrap;
}

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

Answer 2

这个怎么样？

.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;
}

编辑：更新以删除白色-space：在 .line-text class 上预换行以停止 space 出现在行首。

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

Answer 3

您可以通过在 HTML 代码中您不想打断的各个地方添加一个不打断的 space 标签来将单词放在一起：

使用

示例：

This is not A convenient but efficient way to prevent line breaks

会显示（在同一行不间断）：这不是一种方便但有效的防止换行的方法

使用<nobr> 这是一个非标准元素，但在我使用过的某些浏览器（IE、Firefox 等）中有效，而且我相信大多数情况下都适用。

<nobr> The tag should enclose the word or sentence you don't want to break</nobr>

将您想要的单词一起显示而不会中断。希望这有帮助

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

How to have a span inside a word without breaking it on wrap?

html

css

word-wrap