19

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

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

Divを使用すると、Chrome、Firefox、IE7 +、Safariで、style = "word-wrap：break-word; overlay：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>
4

2 に答える 2

44

Microsoft 独自のword-break:break-all;

  <td style="word-break:break-all;">
于 2012-09-05T19:25:29.773 に答える
4

私はパーティーに遅れていることを知っていますが、この投稿に出くわし、プロパティを使用したい他の人にできる推奨事項は、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;.

CodePen で作成したこのデモ (今のところ醜い ><) を確認してください: Word-breaks in long string words.

詳細については、次のリンクを参照してください。

お役に立てれば。

于 2015-04-10T16:50:26.777 に答える