Ниже приведен снимок экрана адаптивного мобильного отображения обернутого текста, который прерывается более длинным словом. Есть ли способ избежать этого перерыва? Я был бы в порядке, если бы он просто начинал текст под рекламой на мобильном телефоне. Я просто хочу, чтобы текст не прерывался.
HTML, который я сейчас использую в Wordpress:
<div style="padding-right:10px; float: left;"><scriptcode></script></div> Text here
Я воспользовался этим решением здесь .
p {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Вы можете добавить clear: left в этот абзац, чтобы перейти под все, что находится выше / перед ним.
Я думаю, что это дубликат Как предотвратить разрывы строк в элементах списка с помощью CSS
Подробнее см. В этой статье: https://www.w3.org/TR/css-text-3/#white-space
Вот с чем я бы попробовал поиграть и посмотреть эффекты в вашем браузере:
<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>
