在设计 app 界面的时候，要展示一部分最新的资讯入口，然后出了一张下面的 UI 稿。
列表设计比较简单，就是列表这块，我个人觉得还是有点意思的。
一般的话，大概率都是用js限制字符串长度，然后截图第一个字符串显示到圆里。
但是有些时候，英文和中文在字符串限制时，中文是占两个字符的。
这样的话，图标可能会发生变形，字符会不居中。
我就想能不能用 css 来实现这样的图标样式。
废话到此，先来个demo。
主要看 css 部分，先固定 标签宽高为，圆角 ，然后设定行高，让字符垂直居中；
设定 ，限制字符溢出；
然后设定 ，让字符间距变大，不让第二个字符显示到 中；
然后设定 ，来让第一个字符居中。
至此，这个字符图标就用 css 实现了。
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
[1] 阅读原文