Перерыв длинные слова в html электронной почте в Outlook 2010
Я принимаю данные от конечного пользователя и вставляю их в электронное письмо в формате 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>Ответы на вопрос(2)
Я знаю, что опаздываю на вечеринку, но могу дать рекомендацию тем, кто наткнулся на этот пост и хочет использовать собственностьword-break:break-all; это обернуть слово, которое нужно разбить на элемент внутри<td> а затем применитьword-break:break-all;.
Вот так:
<td>Serial #: <a href="#" style="word-break:break-all;">1111222233334444555566667777888899990000</a></td>
На этой заметке вы также можете использовать другие вещи, чтобы разбить длинные слова, такие как<wbr> элемент или «символ пробела нулевой ширины»; к.а. ZWSP, который является​и если вы хотите дефисы, когда текст разрывается, используйте­.
Проверьте это (пока что уродливое & gt; & lt;) демо, которое я сделал в CodePen:Разрывы слов в длинных строковых словах.
Больше информации в следующих ссылках:
The wbr tag - QuirksMode.org<wbr> - MDN - Mozilla Developer Network
wbr (HTML element) - SitePoint.com
Надеюсь это поможет.