Блог

Я хочу отправить по электронной почте html-электронное письмо с PHP, содержащее ссылку типа:

https://www.example.com/this/is/a/very/long/link/which/might/be/toooooooooooooooolooooooooooooooooooong/

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

Итак, идея заключалась в том, чтобы просто добавить <wbr> подобное:

 <a href="https://www.example.com/this/is/a/very/long/link/which/might/be/toooooooooooooooolooooooooooooooooooong/">
https://www.example.com/<wbr>this/<wbr>is/<wbr>a/<wbr>very/<wbr>long/<wbr>link/<wbr>which/<wbr>might/<wbr>be/<wbr>toooooooooooooooolooooooooooooooooooong/
</a>
  

Но это не работает ни в Windows, ни в iOS (см.https://www.caniemail.com/features/html-wbr /).

Я пытался использовать amp;shy; , который работает нормально, но выдает — при разрыве строки.

Есть ли какой-либо другой способ, который будет работать в большинстве почтовых клиентов?

Я создал шрифт шириной 600 пикселей td с отступом 40 пикселей, рамкой 1 пиксель и установил базовый стиль шрифта. Я добавил p тег для переноса href и добавил следующий встроенный стиль для обоих: word-break: break-all; white-space: wrap; .

Я протестировал это с помощью Лакмуса в Outlook, IOS, Gmail, и он переносится без каких-либо трудностей.

 <p style="word-break: break-all; white-space: wrap;">
  <a style="word-break: break-all; white-space: wrap;" href="http://stackoverflow.com">
https://stackoverflow.comThisisaverylongurlwithoutabreakoraspaceusingonlyforwardslashestobreakupwordswithcsslikeyouwouldfindinareallylongurl.html</a>
</p>
  

Полный код таблицы:

https://jsfiddle.net/wallyglenn/9f3pcqnx/

Удачи.

Одним из подходов было бы обернуть отображаемый текст в div, а затем использовать text-overflow атрибут css.

 <a href="http://google.de">
   <div style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;max-width:200px">
     http://this-is-a-very-long-url-you-probably-never-want-to-see-but-hey-lets-pretend-we-want-this.xxx/why/on/earth/am/I/writing/so/much/text
   </div>
</a>  

В обычном URL-адресе есть много символов, где будут встречаться разрывы, такие как тире или косая черта (в Gmail они будут автоматически добавляться <wbr> перед каждой косой чертой / ), для некоторых почтовых клиентов.

iOS имеет тенденцию автоматически устанавливать разрыв.

Yahoo, похоже, не реагирует ни на что, кроме <wbr> (или amp;shy; ).

Таким образом, для длинного СЛОВА (может отличаться, если есть другие символы, которые будут означать break-word лучше), решение для перекрестной рассылки на 2020 год является:

 <table>
    <tr>
        <td width="200"><p style="overflow-wrap: break-all; word-wrap: break-all; word-break: break-all;">adsfasdfasdfasdfasdf<wbr>asdfasdfasdfasdfasdfdasfasdfasdfasdfasdf<wbr>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
        </td>
    </tr>
</table>
  

Возможно, вам удастся уйти overflow-wrap: break-word; word-wrap: break-word; word-break: break-word в зависимости от того, что у вас есть.