Вопрос по html-email, outlook-2010, html – Перерыв длинные слова в html электронной почте в Outlook 2010

15

Я принимаю данные от конечного пользователя и вставляю их в электронное письмо в формате HTML. Но если конечный пользователь вводит длинный URL-адрес или действительно длинное слово, это нарушает мою HTML-разметку в Outlook 2010, расширяя столбец или элемент div за указанную ширину.

В Chrome, Firefox, IE7 + и Safari я могу использовать style = & quot; table-layout: fixed & quot; чтобы заставить столбцы таблицы на определенную ширину. Но Outlook 2010 игнорирует это, и длинное слово выталкивает ширину таблицы за пределы фиксированной ширины.

С Divs, в Chrome, Firefox, IE7 + и Safari я могу использовать style = & quot; word-wrap: break-word; переполнение: скрытый; width: 100px & quot ;, чтобы зафиксировать ширину div. Но в Outlook 2010 он выталкивает div за фиксированную ширину.

Как я могу заставить outlook2010 обернуть длинное слово и соблюдать фиксированную ширину?

Вот мой пример HTML:

<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table width="400" style="table-layout: fixed" border="1">
    <tr>
        <td width="100">
            yo
        </td>
        <td width="300">
            Don't move me
        </td>
    </tr>
</table>
<table width="400" style="table-layout: fixed" border="1">
    <tr>
        <td width="100" style="word-wrap: break-word; overflow: hidden; width: 100px" border="1">
            yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
        </td>
        <td width="300">
            Ya moved me
        </td>
    </tr>
</table>
<table width="400" border="1">
    <tr>
        <td width="100">
            <div style="word-wrap: break-word; overflow: hidden; width: 100px" border="1">
                yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
            </div>
        </td>
        <td width="300">
            Ya moved me
        </td>
    </tr>
</table>
</body>
</html>
</code>
затем разделить предложение - я считаю, что движок рендеринга Outlooks не основан на стандартах (и, вероятно, довольно недокументирован относительно того, как заставить его делать то, что вы хотите - google & quot; outlook 2010 html engine рендеринг & quot; Paul Sullivan
Более простое решение может состоять в том, чтобы разделить вход / обрезку с помощью elipsis beond определенной длины. Paul Sullivan
и вы пробовали атрибут pre css - МОЖЕТ ли он что-то делать в 2010 году? увидетьstackoverflow.com/questions/7284990/… Paul Sullivan
@PaulSullivan - это решение для обмена сообщениями, поэтому я действительно надеюсь предоставить конечному пользователю весь текст сообщения. Hoppe
Да, это как раз то, что я подталкивал к вам - это может быть не элегантно или умно, но оно выполняет свою работу. Paul Sullivan

Ваш Ответ

2   ответа
3

Я знаю, что опаздываю на вечеринку, но могу дать рекомендацию тем, кто наткнулся на этот пост и хочет использовать собственностьword-break:break-all; это обернуть слово, которое нужно разбить на элемент внутри<td> а затем применитьword-break:break-all;.

Вот так:

<td>Serial #: <a href="#" style="word-break:break-all;">1111222233334444555566667777888899990000</a></td>

На этой заметке вы также можете использовать другие вещи, чтобы разбить длинные слова, такие как<wbr> элемент или «символ пробела нулевой ширины»; к.а. ZWSP, который является&#8203;и если вы хотите дефисы, когда текст разрывается, используйте&shy;.

Проверьте это (пока что уродливое & gt; & lt;) демо, которое я сделал в CodePen:Разрывы слов в длинных строковых словах.

Больше информации в следующих ссылках:

Надеюсь это поможет.

33

Используйте собственность Microsoftword-break:break-all;

  <td style="word-break:break-all;"> 
Похоже, он работает в Outlook 2010 с тегами TD. Hoppe
ПРИМЕЧАНИЕ: это нарушает перенос слов для обычного текста! Ваши слова будут обрезаны посередине на всех клиентах, если они содержатся в теге с этим стилем.
Это действительно работает только для MS Outlook. Если вы хотите кросс-браузер, есть обсуждение этого здесь -stackoverflow.com/a/12389079/1646397
@samanthasquared, ты только что спас мой день.
В сочетании с переносом слов он больше не будет работать. Кроме того, добавление! Важно к любому правилу портит Outlook (2007-> 2013). Мне удалось заставить его работать между клиентами / устройствами - но в GMail есть некоторые ошибки отображения как побочный эффект использования слова-разбиения: взлом-все. Кроме того, в заключение: используйте ТОЛЬКО слово-разрыв: разрыв-все на теге TD и макет таблицы: исправлено на родительской таблице, и это будет работать на всех! клиентов.

Похожие вопросы