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

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>

使用 CSS 显示姓名首字母

Use CSS to show name initials

css

truncate

overflow