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.

maybe you can do this differently .. check this : https://stackoverflow.com/questions/50092108/align-guitar-chords-on-web/50092148#50092148 — Temani Afif, May 21 '18 at 00:45
Why do you use `inline-block` in `.chord`? I think you, just, need to remove the `display: inline-block` from `.chord`. — SaidbakR, May 21 '18 at 00:54
@SaidbakR `inline-block` lets me increase the height of the chord span, so the chord will appear above the text instead of covering it. — Mirror318, May 21 '18 at 01:00
@TemaniAfif that example uses absolute positioning. I _could_ do that, but by giving my chord span a height, the lines with chords have space for the chords, and lines without chords (like other stanzas) aren't spaced — Mirror318, May 21 '18 at 01:02
ok here is another one https://stackoverflow.com/questions/50359121/make-selector-contribute-to-element-width/50359172#50359172 they are just ideas :) as actually i don't see a solution for your case — Temani Afif, May 21 '18 at 01:04

Richard Lovell · Accepted Answer · 2018-05-21T01:15:01.787

2

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/

edited May 21 '18 at 01:15

answered May 21 '18 at 01:06

Richard Lovell

848
10
18

Updated to remove white-space: pre-wrap on .line-text class to stop space appearing at start of line. – Richard Lovell May 21 '18 at 01:15
This works, but requires adding a container span around any word with a chord inside—that gets tricky when there are multiple chords in a word. – Mirror318 May 21 '18 at 01:23

score 0 · Answer 2 · answered May 21 '18 at 00:48

0

try:

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

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

answered May 21 '18 at 00:48

aaron.xiao

198
8

Sorry I wasn't clear—I do want wrap, but I want the whole word to wrap, not break in half (I want to break on spaces) – Mirror318 May 21 '18 at 00:57

score 0 · Answer 3 · answered May 21 '18 at 01:12

you could keep the words together by adding a non-breaking space tag within various places you don't want to break in the HTML code:

Using

Example:

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

Will display (On the same line without breaking): This is not A convenient but efficient way to prevent line breaks

Using <nobr> This is a non-standard element but has worked in some browsers that I have used (IE, Firefox, ) and am sure would work for most.

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

Will display the word you want together without breaking. Hope this helps

I'm happy with breaks on spaces, the problem is breaking halfway through a word (because of the span inside the word) — Mirror318, May 21 '18 at 01:15

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

3 Answers3