改变跨度的显示顺序

Question

我正在帮助一个朋友为科学杂志写一些文章。一些出版商要求参考书目中引用的作者以“姓、名”的形式出现，而另一些出版商则要求“名字、姓氏”（当然，列表按姓氏排序，有时姓氏以小写大写）。

我知道这最好用数据库来完成，但我朋友的技能还没有达到那个水平。

如果我写一个非常简单的 HTML 页面，使用这样的行

<p><span class="lname">Doe</span>, <span class="fname">John</span></p>

有没有一种 CSS 方法可以将行显示为“John DOE”，或者我必须使用一些 JS 吗？

Answer 1

你可以用 flexbox 做到这一点，使用order（稍作调整）。

代码（https://jsfiddle.net/sebastianbrosch/7Lqr68ar/）：

p {
  display:flex;
}
.fname {
  order:1;
}
.lname {
  order:2;
}
.fname:after {
  content:",\00a0";
}

<p>
  <span class="lname">Doe</span>
  <span class="fname">John</span>
</p>

您也可以使用更动态的解决方案：

#name {
  display: flex;
}
#name.fl .firstname:after {
  content: "\00a0";
}
#name.lf .lastname:after {
  content: ",\00a0";
}
#name.fl .firstname,
#name.lf .lastname {
  order: 1;
}
#name.fl .lastname,
#name.lf .firstname {
  order: 2;
}

<p class="fl" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
</p>
<p class="lf" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
</p>

提示：您可以使用此解决方案，但最好使用 PHP 准备名称或从数据库中以正确格式获取名称。设置order只是设置视觉顺序，而不是设置代码或屏幕阅读器的顺序。