图标和长文本之间的现在（没有空格）

Question

对于我的显示器，我有长串（文件指纹），我会在每行的开头放一个图标。但是当文本很长时，文本将从一个新行开始。

这是CSS代码

.myClass {
    color: var(--paper-grey-600);
    margin: 0.5em 0;
    font-size: 0.7em;
    color: lightslategrey;
    overflow-wrap: break-all;
    word-wrap: break-all;
    --iron-icon-height: 1em;
    --iron-icon-width: 1em;
    --iron-icon-fill-color: rgb(230, 47, 108);
    --iron-icon-stroke-color: rgb(230, 47, 108);
}

这是HTML代码：

<div width="22em">
    <div class="myClass">
        <iron-icon icon="icons:check"></iron-icon>&nbsp;<span>md5:998da77cf888d2718238c3c1cef3b561</span><br>
        <iron-icon icon="icons:check"></iron-icon>&nbsp;<span>sha256:aa4420e00557447ac5604bedf079357016a93a6542d420b05412e3502122916c</span><br>
        <iron-icon icon="icons:check"></iron-icon>&nbsp;<span>whirlpool:846b472913e0166d6acaeca99a6d9c62be530ba24391dec13ac90d0f85e3ae2cb69fef47be18dd579752cad0cf1490313b599edbb955fb930bf4411c985513e8</span><br>
        <iron-icon icon="icons:check"></iron-icon>&nbsp;<span>ripemd256:54575af9bdaebc31d6dcde8a6fa60d1fc14d6fa580e0963ffe562604762f75d4</span><br>
    </div>
</div>

这就是我得到的

知道如何让文字在图标后面开始吗？

Answer 1

这个怎么样：

.myClass span:before {
    display: inline-block;
    width: 10px;
    height: 10px;
    content: '';
    background: url(https://www.91-cdn.com/wap/images/tick-icon.png) no-repeat center;
    background-size: cover;
    margin-right: 2px;
}

<div class="myClass">
<span>md5:998da77cf888d271</span><br>
<span>sha256:aa4420e005574</span><br>
<span>whirlpool:846b472913</span><br>
<span>ripemd256:54575af9bd</span>
</div>

Answer 2

做两件事： 1.将此css添加到myClass

.myClass {
    color: var(--paper-grey-600);
    margin: 0.5em 0;
    font-size: 0.7em;
    color: lightslategrey;
    overflow-wrap: break-all;
    word-wrap: break-all;
    --iron-icon-height: 1em;
    --iron-icon-width: 1em;
    --iron-icon-fill-color: rgb(230, 47, 108);
    --iron-icon-stroke-color: rgb(230, 47, 108);
           word-wrap: break-word;//+added here
}

2.添加此css

.myClass iron-icon {
            display: inline !important;
 }

注意：在codepen中我使用了ZMDI图标而不是iron-icon。

尝试一下，它应该适合你。

以下是预览链接： https://codepen.io/ziruhel/pen/ZaEdGG