web-dev-qa-db-ja.com

Outlook2010のHTMLメールで長大語を分割する

エンドユーザーの入力を受け取り、それをHTMLメールに挿入しています。ただし、エンドユーザーが長いURLまたは非常に長いWordを入力すると、指定された幅を超えて列またはdivが拡張され、Outlook2010のHTMLレイアウトが壊れます。

Chrome、Firefox、IE7 +、およびSafariでは、style = "table-layout：fixed"を使用して、テーブルの列を特定の幅に強制できます。ただし、Outlook 2010はこれを無視し、長いWordはテーブルの幅を固定幅を超えて押し出します。

Divを使用すると、Chrome、Firefox、IE7 +、Safariで、style = "Word-wrap：break-Word; overlay：hidden; width：100px"を使用してdivの幅を修正できます。ただし、Outlook 2010では、divが固定幅を超えて押し出されます。

Outlook2010で長いWordをラップし、固定幅を尊重するにはどうすればよいですか？

これが私のサンプル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>
htmlhtml-emailoutlook-2010
16
Hoppe

Microsoft独自のWord-break:break-all;を使用する

  <td style="Word-break:break-all;">
37
samanthasquared

パーティーに遅れていることはわかっていますが、この投稿にぶつかってプロパティWord-break:break-all;を使用したい他の人に推奨できるのは、<td>内の要素に割り込むために必要な単語をラップしてから、Word-break:break-all;を適用することです。

そのようです：

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

このメモでは、<wbr>要素や、&#8203;である「ゼロ幅スペース文字」（別名ZWSP）などの長い単語を区切るために他のものを使用することもできます。テキストが途切れるときにハイフンが必要な場合は、&shy;を使用してください。

CodePenで作成したこの（今のところ醜い> <）デモを確認してください： 長い文字列の単語の単語区切り

次のリンクで詳細をご覧ください。

お役に立てれば。

4
Ricardo Zea