Я принимаю данные, введенные конечным пользователем, и вставляю их в электронное письмо в формате HTML. Но если конечный пользователь вводит длинный URL-адрес или очень длинное слово, мой HTML-макет в Outlook 2010 ломается, расширяя столбец или элемент div за пределы указанной ширины.
В Chrome, Firefox, IE7+ и Safari я могу использовать style="table-layout:fixed", чтобы принудительно установить для столбцов таблицы определенную ширину. Но Outlook 2010 игнорирует это, и длинное слово выдвигает ширину таблицы за пределы фиксированной ширины.
С Divs, в Chrome, Firefox, IE7+ и Safari я могу использовать style="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>