Search code examples
htmlcsspolymer

nowrap between icon and long text (no space)

For my display I have long strings (file fingerprints) and I would to put an icon at the begining of each lines. But the text starts on a new line when the text is to long.

Here is the CSS code

.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);
}

Here is teh HTML code:

<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>

And here what I get

Snapshot of the result

Any idea how to make text to begin just after the icon?

Solution

  • Just do two thing: 1. add this css to 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.add this css

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

    Note: In codepen I used ZMDI icon instead of iron-icon.

    Try it, it should works for you.

    Here is preview link: https://codepen.io/ziruhel/pen/ZaEdGG