在设计App界面的时候，需要展示一部分最新的信息条目，然后就制作了下面的UI稿。
UI草案截图如下：
列表设计比较简单，就是列表后面的方形图标，个人觉得有点意思。
通常html文字垂直居中，很大概率是用js来限制字符串的宽度html文字垂直居中，然后将截图中的第一个字符串显示在圆圈中。
而且有时，当中文和英文的字符串受到限制时，英文会占用两个字符。
在这种情况下，图标可能会扭曲并且字符可能不会居中。
我想知道是否可以使用css来实现这样的图标样式。
废话就这么多了，我们先来个演示。
html部分：
<ul><li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li><li><span>用CSS可以做什么？</span>用CSS可以做什么？</li><li><span>前端的致命诱惑</span>前端的致命诱惑</li></ul>
CSS部分：
span{width: 42px;height: 42px;line-height: 40px;color: #1E47ED;font-size: 18px;font-weight: 700;text-indent: 12px;border-radius: 50%;display: block;float: left;overflow: hidden;background-color: #eaeaea;letter-spacing: 20px;margin-right: 15px;}
主要看css部分，首先将span标签的宽高固定为50%，然后设置列宽，使字符垂直居中；
设置overflow:hidden来限制字符溢出；
然后设置letter-spacing: 200px，让字符宽度变大，防止第二个字符显示在span内；
然后设置 text-indent: 12px 使第一个字符居中。
至此，这个人物图标就已经用css实现了。
渲染效果：
完整代码：
--HTML--
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>04 第一个字符串生成文字图标</title></head><body><div class="app"><ul><li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li><li><span>用CSS可以做什么？</span>用CSS可以做什么？</li><li><span>前端的致命诱惑</span>前端的致命诱惑</li></ul></div></body></html>
--CSS--
*{margin: 0;padding: 0;list-style: none;transition: .5s;}html,body{background-color: #f5f5f5;color: #fff;font-size: 14px;}.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;}.app ul {max-width: 300px;}.app ul li{width: 100%;color: #152239;font-size: 16px;line-height: 42px;margin: 15px 0;float: left;}.app ul li span{width: 42px;height: 42px;line-height: 40px;color: #1E47ED;font-size: 18px;font-weight: 700;text-indent: 12px;border-radius: 50%;display: block;float: left;overflow: hidden;background-color: #eaeaea;letter-spacing: 20px;margin-right: 15px;}
