文本包装打破移动

Question

下面是包装文本的响应式移动显示的屏幕截图，该文本打破了较长的单词。有没有办法避免这种休息？如果它只是在移动设备上的广告下面开始播放文字，我会没事的。我只想避免文本中断。

我目前在Wordpress中使用的HTML是：

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

Answer 1

我从here开始使用此解决方案。

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

Answer 2

您可以将clear: left添加到该段落，以便在其上方/之前浮动的任何内容下。

Answer 3

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>