Return 使用 CSS 到文本的下一行？

Question

我有一个 css 问题

我有一个td，里面有一个文字，你看到的文字本身就是一个代码，但只当它是文字

我现在的td比预期的要大，因为里面的文字超过了parent的宽度，为此我试了这个 white-space:initial 属性如你所见，我期望文本永远不会从其父项中消失，中断到文本中的下一行（不是单词）

<table>
<tr>
    <td align="center" style="text-align:center;font-size: 12px;width:130px;white-space:initial;line-height:20px;max-width:130px;" width="130">
       <a class="link-txt" href="%%=RedirectTo(CONCAT(TreatAsContent(@delivery_service_link), '&utm_content=footer&utm_clickposition=delivery_service_copy'))=%%" style="text-decoration:none;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;line-height:20px;white-space:initial; text-align:center;">
                 %%=TreatAsContent(
                @delivery_service_copy )=%%</a>
    </td>
</tr>
</table>

最终结果很糟糕：

预期结果：

如有任何帮助，我们将不胜感激

这是为了电子邮件开发，这就是为什么有一些内联样式

谢谢

Answer 1

如您所见，长文本会排版。

没有一点代码适用于所有电子邮件环境，也不是全部 CSS（有些去掉了 CSS 或不支持）。因此，您会看到 <wbr> 这是涵盖这些情况的可选中断。

这是片段：

<style type="text/css"> <!-- Put in <head> -->
.wordwrap {
overflow-wrap: break-all; 
word-wrap: break-all; 
word-break: break-all
}
</style>

<p class="wordwrap" style="overflow-wrap: break-all; word-wrap: break-all; word-break: break-all;"><a href="http://www.this.com/is/too/long/for/mobiles">http://<wbr>www.this.com/<wbr>is/too/<wbr>long/for/<wbr>mobiles</a></p>

这要求信息在您希望它尝试中断的点内有 <wbr>，因此如果它是动态出现的，并且您无法编辑动态值，它就不会在任何地方都有效.

Return 使用 CSS 到文本的下一行？

Return to next line in text using CSS?

html

css

line-breaks

html-email