Question

我正在尝试编辑电子邮件。我有类似下面的东西。有没有办法可以使用CSS重新排列下面的内容，看起来像下面的输出？

<span id="one">One</span>
Hello friend
<span id="three">Three</span>
Hello friend 2
<span id="five">Five</span>
Hello friend 3
<span id="two">Two</span>
Hello friend 4
<span id="four">Four</span>

输出

一

你好朋友

两个

你好朋友2

三

你好朋友3

四

你好朋友4

五

Answer 1

您可以使用 css 来控制文档的呈现，使其与文档顺序不同。我为此使用 flexbox （ display：flex ）。但是，它还依赖于HTML的某种常规结构，这不是我在示例中看到的。不确定你是否能够修改它。

＆＃13;

.container {
   display: flex;
   flex-direction: column;
}

.first {
   order: 1;
}

.second {
   order: 2;
}

.third {
   order: 3;
}

.forth {
   order: 4;
}

.fifth {
   order: 5;
}

＆＃13;

<div class="container">
  <div class="first">
    <span>This is the first</span>
  </div>
  <div class="third">
    <span>This is the third</span>
  </div>
  <div class="fifth">
    <span>This is the fifth</span>
  </div>
  <div class="second">
    <span>This is the second</span>
  </div>
  <div class="forth">
    <span>This is the forth</span>
  </div>
</div>

＆＃13;

Answer 2

简短的回答是否定的。

这需要使用每个电子邮件客户端都不支持的CSS属性和/或HTML属性。有关详细信息，请参阅campaign monitor list of supported CSS properties。

电子邮件编码与编码网页不同。您实际上仅限于使用主要客户端普遍支持的CSS属性和HTML属性。使用弹性框和其他奇特的CSS3属性并不总是可靠的电子邮件。

此外，通过CSS重新排序HTML文档几乎从来都不是一个好习惯（除非绝对必要）。它可能会造成严重的可用性问题。

Answer 3

据我所知，没有。使用CSS无法做到这一点。

问题在于CSS意味着美化＆＃39; DOM结构，但不改变它。看起来您正在以一种无法预测元素顺序的方式构建DOM结构。

Answer 4

尝试将此添加到您的css

span{
  display:block;
}

CSS重新排列电子邮件中的文本？

4 个答案: