更改跨度的显示顺序

Question

我正在帮助一位朋友为科学杂志撰写一些文章。一些出版商要求参考书目中引用的作者格式为 "last name, first name"，而其他出版商则要求 "first name, last name"（当然，列表按姓氏排序，有时姓氏以小写字母表示）。

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

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

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

是否有 CSS 方式将行显示为 "John DOE" 或者我必须使用一些 JS 吗？

Answer 1

您可以使用浮动并隐藏逗号。

.fname {float: left; padding-right: 5px;}
.comma {display: none;}

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

Answer 2

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

代码 (https://jsfiddle.net/sebastianbrosch/7Lqr68ar/):

p {
  display:flex;
}
.fname {
  order:1;
}
.lname {
  order:2;
}
.fname:after {
  content:",[=10=]a0";
}

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

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

#name {
  display: flex;
}
#name.fl .firstname:after {
  content: "[=12=]a0";
}
#name.lf .lastname:after {
  content: ",[=12=]a0";
}
#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.

Answer 3

这是使用 data-attributes 和 :before 以及 :after

的不同方法

假设您的作者列表位于我称为 .autherContainer 的容器中，该容器具有 additional class .lnLast 或.lnFirst。作者姓名如图所示，每个版本都写两次姓氏

HTML:

<div class="authorContainer lnFirst">
    <p data-ln-first="Doe, " data-ln-last=" DOE">John</p>
</div>

<div class="authorContainer lnLast">
    <p data-ln-first="Dear, " data-ln-last=" DEAR">Jane</p>
</div>

CSS

.authorContainer.lnFirst p:before {
    content: attr(data-ln-first);
}

.authorContainer.lnLast p:after {
    content: attr(data-ln-last);
}

我的假设基于这样一个事实：如果列表都在同一个容器中，那么您可以简单地按照它们应该的顺序编写它们，而不是遵循某种格式并添加多余的代码，但这就是我的想法其他人可能不同意

更改跨度的显示顺序

changing display order of span

html

css

bibliography