Prevent Word Slit Between Spans From Being Split During Word Wrap

user_893462 0
Viewed 27

I have a situation where I'm styling the first half of a paragraph in one way and the second half in another way by using spans however the change happens (on purpose) in the middle of a really long word like this:

<span id="first-half">Text that is normal length followed by a reallylongword</span><span id="second-half">thatjustkeepsgoing and then normal text continues.</span>

The issue I'm running into is that Chrome and Edge (though not Firefox) consider the long word to be two separate words and split the word when applying text wrapping. Any way to prevent this and have the word treated as one word even though its split by a span?

word-wrap css html
1 Answers

I've limited the size of the container to 150px so you can see it will not break word even if there's not enough space for it.

.red {
  width: 150px;
  color: red;
}

.green {
  color: green;
}
<p class="red">
  Text that is normal length followed by a reallylongword<span class="green">thatjustkeepsgoing and then normal text continues.</span>
</p>

user_164167170
Related