使用CSS显示名字缩写

Question

有没有简单的CSS方法将名称缩写为其首字母？

Foo Bar => F. B.

我想出了一个（原型）解决方案，但是text-overflow: '.'只能在Firefox中使用。

我正在寻找一种在所有浏览器中都有效的CSS解决方案。

.initials {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: '.';
    width: 2ch;
}

<p class="initials">Foo</p> <p class="initials">Bar</p>

- Basti

Answer 1

您可以考虑使用伪元素来实现一个技巧。需要注意的是，当涉及到等宽字体时，使用 ch 单位是比较合适的：

.initials {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 2ch;
  font-family:monospace;
  font-size:20px;
  position: relative;
}

.initials:after {
  content: ".";
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  background:#fff;
}

<p class="initials">Foo</p>
<p class="initials">Bar</p>

如果您想要透明度：

.initials {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 2ch;
  font-family: monospace;
  font-size: 20px;
  position: relative;
  letter-spacing: 1ch; /*added*/
}

.initials:after {
  content: ".";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  letter-spacing: 0; /*added*/
}

body {
  background: pink;
}

<p class="initials">Foo</p>
<p class="initials">Bar</p>

- Temani Afif