在邮件中使用 CSS 进行字符串操作（hack）

Question

是否有一种简单的方法可以仅使用 html 和 css 从字符串的开头删除或隐藏两个字符？你可以为自己保留对问题的反对票......我知道这是一个黑客。

我正在使用 mailchimp 发送废弃的购物车提醒邮件。产品价格显示为

zl123

但我需要将其显示为

123 zl

我试过更改货币格式的设置，但我还没有找到解决办法，所以我会尝试用其他方式破解它。 Mailchimp 会自动替换一个占位符，所以我必须处理他们放置的内容而不是价格占位符，我无法控制它。

我有一个 html 邮件模板，我可以使用 css 但不能 javascript。如果您知道如何直接在 mailchimp 设置中解决格式问题，那当然也可以。非常感谢任何帮助。

这是产品列表代码，标签是 *|PRODUCT:PRICE|*:

*|ABANDONED_CART:[$total=3]|*
<table>
  <tbody>
    <tr>
      <td rowspan="3" style="vertical-align:top" valign="top" width="80"><a href="*|CART:URL|*" style="max-width: 80px; text-decoation: none !important" target="_blank"><img src="*|PRODUCT:IMAGE_URL|*" /> </a></td>
      <td style="padding: 10px 30px"><a class="ab-cart__name" href="*|CART:URL|*" target="_blank">*|PRODUCT:TITLE|*:</a></td>
    </tr>
    <tr>
      <td style="padding: 10px 30px"><a class="ab-cart__price" href="*|CART:URL|*" target="_blank">*|PRODUCT:PRICE|*</a></td>
    </tr>
    <tr>
      <td style="padding: 10px 30px">
      <table cellpadding="0" cellspacing="0" style="background:#bed22c;">
        <tbody>
          <tr>
            <td align="center" style="padding:9px 20px; padding-right:5px" valign="middle"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank"><img class="ab-cart__icon" data-file-id="1415814" height="13" src="https://gallery.mailchimp.com/6b8c9d4b13e018d718abc0a65/images/2226adf6-5cc3-4f24-aa98-39825c247c2c.png" width="14" /> </a></td>
            <td style="padding:9px 0; padding-right:10px"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank">Zobacz w koszyku </a></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
*|END:ABANDONED_CART|*

Answer 1

Considering your text lz123 comming form server and appened in <p>lz123</p>

您可以使用 ::after 和 ::before css 选择器

<p>

但是如果无法使用 css

<p>

对于字符串操作，我建议使用 Javascript 或 Jquery

Answer 2

一个 hacky 的方法是修复并重复这个词两次！

p {
  font-size: 20px;
}

.hide-first-two {
  text-indent: -0.75em;
  overflow: hidden;
  display: inline-block;
}

.show-first-two {
  width: 0.75em;
  overflow: hidden;
  display: inline-block;
}

<p>
  <span class="hide-first-two">zl123</span>
  <span class="show-first-two">zl123</span>
</p>

或使用内联样式：

<p style="font-size: 20px;">
  <span style="text-indent: -0.75em; overflow: hidden; display: inline-block;">zl123</span>
  <span style="width: 0.75em; overflow: hidden; display: inline-block;">zl123</span>
</p>

在邮件中使用 CSS 进行字符串操作（hack）

String Manipulation with CSS in Mail (hack)

html

css

mailchimp