改变 span 的显示顺序

Posted 2023-03-31

【中文标题】改变 span 的显示顺序

【英文标题】：changing display order of 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，以正确的方式输出它们不是更简单吗？

【参考方案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;

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

【参考方案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);

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