使用 CSS 显示姓名首字母

Question

有没有简单的css方法可以将名称简化为其首字母？

Foo Bar => F. B.

我想出了一个(原型(解决方案，但text-overflow: '.'仅适用于火狐浏览器。

我正在寻找适用于所有浏览器的 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>