解决css两行省略首行前面加icon问题

先放一张美女图片，场景实现

这个京东超市icon是块级，然后第二行的文字又跟京东超市对齐，这种怎么实现？

OK直接上代码

这是html

<div class="aaa">
        <div class="aaa-icon">我是图片</div>
        我是测试一号二号三号四号五号六号七号八号九号十号一号二号三号四号五号六号七号八号九号十号
        我是测试一号二号三号四号五号六号七号八号九号十号一号二号三号四号五号六号七号八号九号十号
        我是测试一号二号三号四号五号六号七号八号九号十号一号二号三号四号五号六号七号八号九号十号
</div>

这是css

<style>
        .aaa {
            width: 100px;
            height: 60px;
            font-size: 14px;
            /* 超出div的内容的隐藏 */
            overflow: hidden;
            /* 溢出的文字，用...代替 */
            text-overflow: ellipsis;
            /* 在元素上设置该属性，可使其子代排列在同一水平上 */
            display: -webkit-box;
            /* 文字两行显示 */
            -webkit-line-clamp: 3;
            /* 允许在单词内换行 */
            word-break: break-all;
            /* 从顶部向底部垂直布置子元素 */
            -webkit-box-orient: vertical;
        }

        .aaa-icon {
            /* 设置元素为行内块元素，既有行内元素的（一行可有多个）特性，又有块元素的（可设宽高）特性 */
            display: inline-block;
            font-size: 12px;
            width: 50px;
            height: 15px;
            background-color: blue;
            color: #fff;
        }
    </style>

好了，效果图如下

这里的重点是主要用到了display: inline-block;这个属性

美女图片/京东测试效果图来源于网络，侵删(手动狗头)