用户头像加载失败时，显示用户名首字符-CSDN博客

本文链接：https://blog.csdn.net/weixin_44240581/article/details/126988686

在这里插入图片描述

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        img {
            display: inline-block;
            width: 60px;
            height: 60px;
            border: 1px solid black;
            vertical-align: middle;

            /* 隐藏超出盒子的内容，包括默认的破损图标和alt文字 */
            overflow: hidden;
        }

        img::before {
            content: attr(alt);
            width: 100%;
            background-color: #fde3cf;
            color: rgb(245, 106, 0);;


            /* 把默认的破损图片和alt文字挤出去 */
            height: 100%;

            /* 增加字符的间距，把字符顶出盒子外，让文字换行，每行显示一个字符 */
            letter-spacing: 60px;

            /* 行高和图片高度一致，首文字垂直居中 */
            line-height: 60px;

            /* 文字缩进，让首字符左右两边间距一样， 需要块级元素属性才生效 */
            text-indent: 60px;
            /* 首字母水平居中 */
            display: flex;
            justify-content: center;

            /* 每个字符一行，中文超出容器会自动换行，这里用于处理连续英文字符 e.g. lilei */
            word-break: break-all;

            /* 英文首字母大写 */
            text-transform: capitalize;

            /* 处理特殊符号，导致布局混乱 */
            /*
                中文特殊符号：避首符号、避尾符号

                避首符号：如。  。默认不能出现在一行的开头，如果刚好到了。就换行了，那么下一行会是
                e.g.   ....一句话。    换行后会把前面一个字带下去，即使上一行还可以放下一个中文字符
                    ....一句&nbsp;&nbsp;
                    话。
             */
            line-break: anywhere; /* 忽略任意符号，任意位置都可换行 */
        }
    </style>
</head>
<body>
    <img src="https://gw.alipayobjects.com/zos/rmsportal/UTjFYEzMSYVwzxIGVhMu.png" alt="李雷">
    <img src="https://Mu.png" alt="李雷">
    <img src="" alt="李雷">
    <img src="" alt="lilei">

    <img src="" alt="l——ilei()">
    <img src="" alt="lilei()">
    <img src="" alt="lilei(李雷)">
</body>
</html>