Блог

Главная - Вопросы по программированию - Как удалить разрыв строки после первого слова, css?

Как удалить разрыв строки после первого слова, css?

#html #css #html-email

#HTML #css #html-электронная почта

Вопрос:

Я создаю электронное письмо в html / css для отправки людям в списке рассылки, и все работает нормально, за исключением того, что на мобильных устройствах разрыв строки после первого слова для каждого абзаца, подобного этому.

пример фото

Код был сгенерирован онлайн-генератором шаблонов электронной почты и выглядит так, как показано ниже. Я почти уверен, что около 80% из них являются избыточными.

 <td style="padding:18px 0px 0px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content">
   <div>
      <div style="font-family: inherit; text-align: left">
         <span style="box-sizing: border-box; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 12px; vertical-align: baseline; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; text-align: center; color: #516775; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(255, 254, 254)">Dear {{contact}}, Please print out this sheet and display at entry point.amp;nbsp;</span>
      </div>
      <div></div>
   </div>
</td>

Какой элемент css я могу добавить, чтобы избавиться от этого, или, альтернативно, какой элемент css я должен удалить, чтобы избавиться от этого эффекта?

Комментарии:

1. Я думаю, вам нужно изменить white-space свойство span с pre-wrap на normal : developer.mozilla.org/fr/docs/Web/CSS/white-space

Ответ №1:

Удалите white-space: pre-wrap; , и все должно работать так, как ожидалось.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Метки: ,