How to avoid text going under the icon when it is on multiple lines

Question

Having the following code snippet, when the window is made smaller, the width is smaller, the text is breaking into multiple lines.

The problem is that it shouldn't get under the icons, it should start from the same position as the above text.

.my-style {
  padding: 0;
  list-style-type: none;
  display: table;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <ul class="my-style">
    <li><i class="far fa-check hacker-green tickbox"></i> This is a very very long text that breaks into multiple lines sometimes</li>
    <li><i class="far fa-check hacker-green tickbox"></i> This should do the same thing as the above text of course</li>
    <li><i class="far fa-check hacker-green tickbox"></i> Argentina is the current world champion at footbal thanks to Messi</li>
    <li><i class="far fa-check hacker-green tickbox"></i> What else should we say about this great accomplishment? Nothing more is needed</li>
  </ul>
</div>

It seems that display: table or display: table-cell doesn't work

Have you tried searching for an answer before posting a new question? https://stackoverflow.com/questions/19212188/avoid-line-break-between-html-elements — Hasse, Jan 20 '23 at 09:55
@Hasse, yes and I didn't find something useful, your link solves a different problem — Leo Messi, Jan 20 '23 at 10:09

score 0 · Answer 1 · edited Jan 20 '23 at 10:28

If I understand it correctly, you want to create a list with custom icon. To do that, you can apply list-style:none on the ul, to remove the default list bullet, and using ::before on li, you can create 'icon-like' effect. Note that you might need to play a bit with the padding and margin, it depends how big icon are you going to use.

.my-style {
  padding: 0;
  list-style: none;
}

.my-style li {
  padding-left: 10px
}

.my-style li::before {
  content: '\f00c';
  display: inline-block;
  margin-left: -15px;
}

<ul class="my-style">
  <li>This is a very very long text that breaks into multiple lines sometimes</li>
  <li>This should do the same thing as the above text of course</li>
  <li>Argentina is the current world champion at footbal thanks to Messi</li>
  <li>What else should we say about this great accomplishment? Nothing more is needed</li>
</ul>

Also, note that you need to use Fontawesome icon unicode within the ::before

How to avoid text going under the icon when it is on multiple lines

1 Answers1