使用 CSS 返回文本中的下一行？答案

【问题标题】：Return to next line in text using CSS?使用 CSS 返回文本中的下一行？
【发布时间】：2022-02-11 09:27:40
【问题描述】：

我遇到了一个 CSS 问题

我有一个td，里面有一个文本，你看到的文本本身就是一个代码，但是把它当成文本而已

我的 td 现在比预期的要大，因为里面的文本超过了父级的宽度，为此我尝试了这个 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>

结果很糟糕：

预期结果：

任何帮助将不胜感激

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

谢谢

【问题讨论】：

如果你想让我们帮助你给我们minimal reproducible example.
不，不是。为了帮助您，我们需要编写整个表格，因为问题不太可能出现在您编写的文章中。这就是“最小可重复性”的意思。这就是您提供的：jsfiddle.net/w6t1d2uv。我们应该如何提供帮助？
@Will 他编辑了他的评论，你需要做的就是在顶部考虑 ad 一个 table 和 tr，所以如果你不知道解决方案也没关系，但上面的代码是够了..我解决了这个问题，只向 TD 添加了一个 css 属性..祝你有美好的一天
运行代码并不能真正提供任何有意义的结果，这不是可重现的代码。我可以建议将style="width: 100%;" 添加到<table> 标记中，但是如果没有实际代码，这实际上只是一个疯狂的猜测。可能有很多原因。

标签： html css html-email line-breaks

【解决方案1】：

如您所见，长文本会推出布局。

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

这是sn-p：

<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>，因此如果它是动态的，并且您无法编辑动态值，它将无法在任何地方工作。

【讨论】：