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

Question

I'm making a lyrics sheet with chords. If I put the chord (as a span) inside a word for exact positioning, it means that word will break in half if the line wraps. How could I keep the word together?

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

Code: 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: I do want wrap, but on the whole word, not breaking a word in half.

Answer 1

How about this?

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

EDIT: Updated to remove white-space: pre-wrap on .line-text class to stop space appearing at start of line.

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