Question

我有一个电子邮件的页脚，其中包含一行中的三个链接。在移动设备上，我希望这些链接完整地包装，但目前链接会在.co.uk等等处理。

<td bgcolor="#f4f4f4" align="left" style="padding: 30px 30px 30px 30px; color: #999999; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; text-align: center; white-space:nowrap; border-collapse: collapse !important;" >
      <p>Some long address, PO Box 123, Someplace, Somewhere, SM1 3RE</p>
      <p style="white-space: nowrap;">
            <a href="tel:01234567891" style="text-decoration: underline; color: #b22024; white-space: nowrap;"><span style="white-space: nowrap;">0000 0000 000</span></a>&nbsp;
            <a href="mailto:someone@somewherelongplacename.co.uk" style="text-decoration: underline; color: #b22024; white-space: nowrap;"><span style="white-space: nowrap;">someone@somewherelongplacename.co.uk</span></a>&nbsp;
            <a href="https://somewherelongplacename.co.uk" style="text-decoration: underline; color: #b22024; white-space: nowrap;"><span style="white-space: nowrap;">somewherelongplacename.co.uk</span></a>
      </p>
</td>

这导致我看到了这一点：

0000 0000 000    someone@somewherelongplacename
.co.uk    somewherelongplacename.co.uk

但我想要的是：

0000 0000 000
someone@somewherelongplacename.co.uk
somewherelongplacename.co.uk

Answer 1

如果你真的想把一行强制作为一个整体，试试这个：

<span style="white-space: nowrap; word-break: keep-all !important; hyphens: none;">
  SomeLongDarnTextYouWantToKeepFromBreaking
</span>

<span style="white-space: nowrap; word-break: keep-all !important; hyphens: none;">
  SomeAdditionalLongDarnTextYouWantToKeepFromBreaking
</span>

您可能需要探索一些组合以使事情有效。这就是我通过将要移动的部分包装到带有span标记的新行来进行长<H1>个中断所需的操作。

祝你好运。

Answer 2

问题是因为你没有响应式布局，或者如果你使用像bootstrap这样的任何框架，你可以使用div类。现在，这是解决您所面临问题的快速解决方案。第1步：在头标记中添加此行（如果尚未存在）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

步骤2：添加一个响应span标记

的类

<td bgcolor="#f4f4f4" align="left" style="padding: 30px 30px 30px 30px; color: #999999; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; text-align: center; white-space:nowrap; border-collapse: collapse !important;" >
  <p>Some long address, PO Box 123, Someplace, Somewhere, SM1 3RE</p>
  <p style="white-space: nowrap;">
        <a href="tel:01234567891" style="text-decoration: underline; color: #b22024; white-space: nowrap;"><span style="white-space: nowrap;" class="responsive">0000 0000 000</span></a>&nbsp;
        <a href="mailto:someone@somewherelongplacename.co.uk" style="text-decoration: underline; color: #b22024; white-space: nowrap;"><span style="white-space: nowrap;" class="responsive">someone@somewherelongplacename.co.uk</span></a>&nbsp;
        <a href="https://somewherelongplacename.co.uk" style="text-decoration: underline; color: #b22024; white-space: nowrap;"><span style="white-space: nowrap;" class="responsive">somewherelongplacename.co.uk</span></a>
  </p>

第3步：

<style type="text/css">
@media screen and (max-width: 620px) {
.responsive{
    display: block;
}
}
</style>

所以基本上你要检查屏幕大小是否小于620px它会将display：block添加到span标记。

停止包装电子邮件中的链接

2 个答案: