改变 span 的显示顺序答案

【问题标题】：changing display order of span改变 span 的显示顺序
【发布时间】：2016-05-01 17:32:55
【问题描述】：

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

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

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

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

有没有一种 CSS 方法可以让该行显示为“John DOE”，还是我必须使用一些 JS？

【问题讨论】：

您要显示John Doe 还是John, Doe？
如果您可以控制 html，以正确的方式输出它们不是更简单吗？

标签： html css bibliography

【解决方案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 只是设置视觉排序，而不是设置代码或屏幕阅读器的排序。

【讨论】：

【解决方案2】：

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

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

&lt;p&gt;&lt;span class="lname"&gt;Doe&lt;/span&gt;&lt;span class="comma"&gt;,&lt;/span&gt; &lt;span class="fname"&gt;John&lt;/span&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

这是一种使用数据属性和:before 和:after 的不同方法

假设您的作者列表位于我称为.autherContainer 的容器中，该容器具有附加类.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);
}

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

【讨论】：