Html электронная почта: объединить несколько слов с "no-wrap" или "inline-block"? - PullRequest
0 голосов
/ 26 апреля 2020

Я бы хотел сохранить некоторые слова вместе в электронном письме html, чтобы между ними не было перерывов (при использовании разных размеров экрана) как можно дольше, непосредственно перед / после.

У меня есть 2 варианта, оба, кажется, работают хорошо:

<p>Lorem ipsum <span style="white-space:nowrap">words without a break</span> biberium.</p>
<p>Lorem ipsum <span style="display:inline-block">words without a break</span> biberium.</p>

Что лучше, какой я должен использовать?

Ответы [ 2 ]

2 голосов
/ 27 апреля 2020

«Кажется, что оба работают хорошо», но только в тестируемом почтовом клиенте.

Первое, на что следует обратить внимание, это добиться согласованности между различными почтовыми клиентами.

Наличие <span> использование display:inline-block не будет работать на Windows рабочем столе Outlook. Inline-block даже не работает на некоторых почтовых клиентах, таких как веб-почта Telstra. White-space:nowrap работает нормально, но опять же не на Outlooks.

Основным способом продвижения вперед является использование неразрывного пробела, т.е. &nbsp;

Даже в этом случае некоторые клиенты, например Apple, прервут его, если не хватит места. В этом случае &nbsp; в сочетании с nowrap может работать. Но если на самом деле не хватает места, мобильные телефоны будут стремиться сжать текст, чтобы он уместился, но не читался. Поэтому лучше не форсировать проблему, а просто использовать &nbsp; в одиночку. Несмотря на это, если строка становится слишком длинной, некоторые клиенты станут нечитаемыми, если не смогут ее разорвать (особенно приложения Gmail).

0 голосов
/ 27 апреля 2020

Спасибо, Натан, за подробный ответ! Я пробовал &nbsp; ранее, но затем переключился на css -методы и забыл о неразрывном пробеле.

Я использую их в дизайне таблицы текучих сред, и единственный недостаток &nbps; заключается в том, что он не будет разбивать слова даже в случае необходимости, но вместо этого увеличит ширину ячейки (и разметка будет разбита). Обходной путь может заключаться в том, чтобы поместить <wbr> внутрь, но опять-таки он не будет работать с Windows 10 Mail и Outlook.

Я действительно ненавижу Microsoft за то, что она такой беспечный разработчик! Для html электронной почты Outlook - это сложная задача, но настоящим кошмаром является приложение Windows 10 для рабочего стола Mail.

Может быть, вы можете проверить мои 2 другие проблемы:
Как Остановить Windows 10 Почта, чтобы вырезать 1px с правой стороны каждого изображения?
Как остановить Windows 10 Почтовое приложение для создания ссылок / контактов из номеров?

Еще раз спасибо за руководство!

...