Is there a way to embed a span within a word without causing it to break during wrapping?

Question

Is there a way to embed a span within a word without causing it to break during wrapping?

As I create a lyrics sheet with chords, I'm facing an issue. Placing the chord (as a span) inside a word for precise positioning causes the word to split in half when the line wraps. How can I prevent this from happening?

https://i.sstatic.net/GlNYb.png

Check out the fiddle: https://jsfiddle.net/96h8kfw9/

Here is the code:

.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 wrapping, but I'd like the entire word to stay intact instead of breaking it in half.

html css word-wrap

Answer 1

Answer №1

What do you think of this solution?

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

UPDATE: The code has been revised to eliminate the appearance of space at the beginning of lines by removing white-space: pre-wrap from the .line-text class.

Check out the solution here!

Answer 2

What do you think of this solution?

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

UPDATE: The code has been revised to eliminate the appearance of space at the beginning of lines by removing white-space: pre-wrap from the .line-text class.

Check out the solution here!

Answer 3

Answer №2

attempt:

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

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

Answer 4

attempt:

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

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

Answer 5

Answer №3

You can maintain the integrity of words by inserting a non-breaking space tag in specific areas within the HTML code where you do not want line breaks:

Using

For instance:

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

This will appear as follows (without any line breaks): This is not A convenient but efficient way to prevent line breaks

Using <nobr> Although this is a non-standard element, it has been effective in certain browsers I have tested (such as IE and Firefox) and should work on most.

<nobr> The tag must surround the word or phrase that shouldn't be split </nobr>

This approach ensures that the designated text remains together without breaking apart. I trust this information proves helpful.

Answer 6

You can maintain the integrity of words by inserting a non-breaking space tag in specific areas within the HTML code where you do not want line breaks:

Using

For instance:

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

This will appear as follows (without any line breaks): This is not A convenient but efficient way to prevent line breaks

Using <nobr> Although this is a non-standard element, it has been effective in certain browsers I have tested (such as IE and Firefox) and should work on most.

<nobr> The tag must surround the word or phrase that shouldn't be split </nobr>

This approach ensures that the designated text remains together without breaking apart. I trust this information proves helpful.

Is there a way to embed a span within a word without causing it to break during wrapping?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for preventing window.location from becoming relative to the file

How to modify the color of a div element with jQuery?

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

Django - issue with table display showing empty row due to query set

Mastering the integration of Sass with NextJS

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

Tips for preventing changes to the HTML code using the inspect tool

In HTML, data can be easily accessed, however, JavaScript does not have the same

CSS: Adding decorative trailing dots below the header when positioned over a background

How can I activate page indicator and additional features in a TIZEN web app for wearables?

Can floating elements be disregarded by block elements?

Unable to display routerLink within innerHTML in Angular

Ways to enhance a browser's response with soup

Unlocking the Power of jQuery's toggle Method for Dynamic Functionality

How to Retrieve the Url of a Clicked Element using CSS Property

Iterate endlessly over CSS styles in Angular 4

Show the elements of an array (that have been read and processed from a text file) on separate lines using JavaScript

Is there a way to eliminate the black dots appearing on the right side of the navigation items within my bootstrap 5 navbar?

Utilizing HTML5 to import content from text files

What are the steps to format text into 2 columns with a personalized design?