Text wrap breaking on mobile

Question

Below is a screenshot of the responsive mobile display of the wrapped text that breaks on a longer word. Is there any way to avoid this break? I would be OK if it simply starting the text below the ad on mobile. I just want to avoid the break in text.

The HTML I currently use in Wordpress is:

    <div style="padding-right:10px; float: left;"><scriptcode></script></div> Text here

This question is too broad and very case specific, you should consider learning better html/css fundamentals — CoppolaEmilio, Apr 24 '17 at 17:00

score 1 · Answer 1 · answered Apr 24 '17 at 22:47

1

I went with this solution from here.

    p {
      overflow-wrap: break-word;
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
    }

answered Apr 24 '17 at 22:47

Adidos

21
1
2

score 0 · Answer 2 · answered Apr 24 '17 at 16:57

0

You can add clear: left to that paragraph to go under anything floated which is above/before it.

answered Apr 24 '17 at 16:57

Johannes

59,058
16
59
114

Would this impact things on mobile and desktop? I'm aiming for a solution that leaves things as-is on desktop (wraps fine around ad), while avoiding the break issue on responsive. – Adidos Apr 24 '17 at 17:39
I don't think so - this simply prevents that this text floats around floated elements which are earlier in the code. That would typically only apply to floated images inside the text paragraphs. – Johannes Apr 24 '17 at 17:47

score 0 · Answer 3 · edited May 23 '17 at 12:34

I think this is a duplicate of How to prevent line breaks in list items using CSS

See this article for more detail: https://www.w3.org/TR/css-text-3/#white-space

Here's what I'd try to play with and see the effects in your browser:

<style>
.wrap_like_normal{
    font-size: 3rem;
}
.nowrap_ad {
    font-size: 3rem;
    white-space: nowrap;
}
</style>
<p class="nowrap_ad">
    This isn't gonna be wrapped at all. This isn't gonna be wrapped at all. This isn't gonna be wrapped at all. This isn't gonna be wrapped at all.
</p >
<p class="wrap_like_normal">
    Wrap this all you want. Wrap this all you want. Wrap this all you want. Wrap this all you want.
</p>

Text wrap breaking on mobile

3 Answers3