Как сделать интервал внутри слова, не нарушая его при переносе?

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>

edit: Я хочу обернуть, но в целом слово, не разбивая слово пополам.

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

вы можете объединить слова, добавив неразрывный пробел в различные места, которые вы не хотите разбивать в HTML-коде:

1. Использование  

Пример:

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>

Будет отображать слово, которое вы хотите вместе, без разрыва.Надеюсь, это поможет

Answer 3

попробуй:

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

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