2

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

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

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

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

有没有一种 CSS 方法可以将行显示为“John DOE”或者我必须使用一些 JS？

4

3 回答 3

6

你可以用 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只是设置视觉排序，而不是设置代码或屏幕阅读器的排序。

于 2016-01-25T12:04:23.390 回答
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>

于 2016-01-25T12:04:06.003 回答
0

这是使用数据属性和: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);
}

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

于 2016-01-25T12:15:53.400 回答