html - 为什么一个空格可以换行?如何在一行中制作带有空格的行

标签 html css html-email

<table width="600">
  <tbody>
    <tr>
      <td> <span>Price:</span> </td>
      <td width="100%">
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:100%;border-bottom:3px dotted #0b863c">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>$30.9 sdfsdfd fgertwet</td>
    </tr>
  </tbody>
</table>

所以我正在尝试创建一个电子邮件模板。它包含带空间的动态内容。每次当它在第三列内有空间时,它都会创建一个新行。但我只希望它在一行中。

我知道它适用于 white-space: no-wrap。然而,white-space 在 outlook 中不支持 -- https://www.campaignmonitor.com/css/ .还有其他想法吗?谢谢!

看到预期:

<table width="600">
  <tbody>
    <tr>
      <td> <span>Price:</span> </td>
      <td width="100%">
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:100%;border-bottom:3px dotted #0b863c">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="white-space: nowrap;">$30.9 sdfsdfd fgertwet</td>
    </tr>
  </tbody>
</table>

最佳答案

这几乎是 HTML 文本的默认行为。

如果您可以控制动态内容,则可以将空格替换为不间断空格 ( ),如下例所示。

<table width="600">
  <tbody>
    <tr>
      <td> <span>Price:</span> </td>
      <td width="100%">
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:100%;border-bottom:3px dotted #0b863c">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>$30.9&nbsp;sdfsdfd&nbsp;fgertwet</td>
    </tr>
  </tbody>
</table>

关于html - 为什么一个空格可以换行?如何在一行中制作带有空格的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42102737/

相关文章:

javascript - 我无法使用 javascript 更改内容选项卡

css - 导航栏 laravel 中的背景颜色

html-email - 检测 HTML 电子邮件中查看者的操作系统;提供横幅

c# - HTML 电子邮件 : Must you send an alternate plain text view as well?

java - 有没有办法在 FreeMarker 电子邮件模板中包含 CSS?

html - 可以使用具有溢出功能的 CSS flexbox 隐藏内容

html - 如何为网站图标制作动画?

jquery - 如何将 div 设置为可见性 :hidden to display using jQuery?

javascript - 避免在 jQuery 内联 css 中使用双引号

html - 底部横幅向上移动到内容区域