html - 更改跨度的显示顺序

Question

我正在帮助一位 friend 为科学杂志撰写一些文章。一些出版商要求引用书目中引用的作者采用“姓氏，名字”的形式，而其他出版商则要求“名字，姓氏”(当然是按姓氏排序的列表，有时姓氏以小写形式显示)上限)。

我知道使用数据库会更好，但我 friend 的技能还达不到那个水平。

如果我写一个非常简单的 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>

Hint: You can use this solution but it would be better to prepare the name with PHP or get the name in the right format from database. Setting the order is only setting the visual ordering but not the ordering on code or for screenreaders.