Element between word cause problems with word-break

HTML & CSS
1

On part of my website I have the following (my word):
<span>m</span><span>y</span><span> </span><span>w</span><span>o</span><span>r</span><span>d</span>

When the browser window is reduced and hits the last letter “d”, “word” ends up on the next line. The parent of the spans has the following settings:
word-break: break-word; white-space: break-spaces; … So everything works as it should:

The problem is that I need to add an empty div / span (which does not contain a character) between “wo” and “rd” in “word”. When I do this, the word gets disconnected, ie. if it needs to be wrapped to the next line, it is “rd” instead of “word” that ends up on the next line.

The span to be added, it can not be anywhere but between the word. It works if the element is set to “inline”, but then I can not specify the width and height which is needed. I’ve also tried “absolute” and “fixed”.

Maybe there is a css setting that tells the browser to ignore the element in the “text analysis”? Anyone have an idea if it can be solved somehow?

2

This is where your issue lies. Anytime you give HxW to an element, that space has to be accounted for. And since it’s empty, it’ll wrap.

Only thing I can think of is adding another span to wrap around the “word” which unsets the breaks.

<div>
   <span>m</span><span>y</span><span> </span><span class="nw"><span>w</span><span>o</span><span class="a"></span><span>r</span><span>d</span></span>
</div>

div {word-break: break-word; white-space: break-spaces; }
.nw { white-space: nowrap;}

.a { display: inline-block; height: 1px; width: 1px; }

with the nw class
image

without it
image

2 Likes
3

When I try is without any CSS (except a big font to make wrapping come sooner, it wraps as normal.

I was going to suggest something similar, wrapping the individual words in an extra span which is set to inline-block.
I have used this method before to influence word wrapping. For example in a title where you want the lines to be more evenly sized after wrapping, instead of one long line and a single orphaned word.

.glue {
    display:inline-block; /* Stick words together */
}

<h1><span class="glue">My Four</span>  <span class="glue">Word Title</span></h1>

So you get:-
My Four
Word Title

Instead of:-
My Four Word
Title

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.