Подтвердить что ты не робот

Перерыв длинных слов в html электронной почте в Outlook 2010

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

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

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

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

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

<!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>
4b9b3361

ОТВЕТЫ

Ответ 1

Используйте фирменную фирму Microsoft word-break:break-all;

  <td style="word-break:break-all;">

Ответ 2

Я знаю, что опаздываю на вечеринку, но рекомендацию, которую я могу сделать для других, которые сталкиваются с этим сообщением и хотят использовать свойство 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;.

Отметьте это (сейчас ugly > <) demo, которое я сделал в CodePen: Word-breaks длинными строковыми словами.

Дополнительная информация по ссылкам:

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