Question

我正在帮朋友为科学杂志写一些文章。一些出版商要求参考书目中引用的作者使用“姓氏，名字”的形式，而其他出版商要求提供“名字，姓氏”（当然还有一个按姓氏排序的名单，有时候姓名较小）帽）。

我知道使用数据库会更好，但我朋友的技能不在那个级别。

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

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

是否有一种CSS方式将该行显示为“John DOE”或者我是否必须使用某些JS？

Answer 1

您可以使用order（稍加调整）使用flexbox执行此操作。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

您可以使用float并隐藏逗号。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

以下是使用数据属性和:before以及:after

的不同方法

假设您的作者列表位于我称为.autherContainer的容器中，该容器中包含其他类.lnLast 或 {{1 }}。作者姓名如图所示，每个版本的姓氏写两次

<强> HTML ：

.lnFirst

<强> CSS

<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>

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

更改范围

3 个答案: