如何在一个单词中有一个跨度而不打破它？答案

【问题标题】：How to have a span inside a word without breaking it on wrap?如何在一个单词中有一个跨度而不打破它？
【发布时间】：2018-10-30 15:01:02
【问题描述】：

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

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

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

【问题讨论】：

也许你可以用不同的方式来做这件事……检查一下：stackoverflow.com/questions/50092108/align-guitar-chords-on-web/…
为什么在.chord 中使用inline-block？我认为您需要从.chord 中删除display: inline-block。
@SaidbakR inline-block 让我增加和弦跨度的高度，因此和弦将出现在文本上方而不是覆盖它。
@TemaniAfif 该示例使用绝对定位。我可以这样做，但是通过给我的和弦跨度一个高度，有和弦的行有和弦的空间，没有和弦的行（像其他小节一样）没有间隔
好的，这是另一个stackoverflow.com/questions/50359121/… 他们只是想法 :) 因为实际上我没有看到适合您的情况的解决方案

标签： html css word-wrap

【解决方案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/

【讨论】：

已更新以删除空格：在 .line-text 类上预先换行以阻止空格出现在行首。
这可行，但需要在任何带有和弦的单词周围添加一个容器跨度 - 当一个单词中有多个和弦时，这会变得很棘手。

【解决方案2】：

尝试：

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

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

【讨论】：

对不起，我没说清楚——我想换行，但我想换行，而不是分成两半（我想在空格处换行）

【解决方案3】：

您可以通过在 HTML 代码中不想中断的各个位置添加不间断的空格标记来保持单词在一起：

使用&nbsp;

例子：

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

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

使用<nobr> 这是一个非标准元素，但在我使用过的一些浏览器（IE、Firefox、）中有效，并且肯定适用于大多数浏览器。

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

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

【讨论】：

我对空格中断感到满意，问题是在一个单词中途中断（因为单词内部的跨度）