шрифт удивительного выравнивая мульти текстовой строки правильно

Question

У меня есть значок с текстом справа от него, как так:

<p style="text-align: left;"> 
    <i class="fa fa-example-icon" style="margin-right: 20px;"></i> 
    Text that is multi-lined. 
</p> 

который выравнивает текст и значок в первую строку. Например,

|icon| Text that is multi-lined. 

Но когда текст идет к следующей строке выглядит так:

|icon| Text that is multi-lined and now 
it actually comes to the next line. 

Я хочу:

|icon| Text that is multi-lined and now 
     it actually comes to the next line. 

Что это лучший способ, чтобы полностью иметь текст выровнены с несколькими строками? У меня есть хаки, но я хочу сделать это правильно.

Answer 1

Вы можете сделать это следующим образом:

.parent{ 
 
    width: 150px; 
 
} 
 
.parent, .text{ 
 
    overflow: hidden; 
 
} 
 
.text{ 
 
    margin: 0; 
 
} 
 
.fa-example-icon{ 
 
float: left; 
 
    display: block; 
 
}

<div class="parent" style="text-align: left;"> 
 
    <i class="fa fa-example-icon" style="margin-right: 20px;">Icon</i> 
 
    <p class="text">Text that is multi-lined. This is multi line text Text that is multi-lined. This is multi line text Text that is multi-lined. This is multi line text Text that is multi-lined. This is multi line text</p> 
 
</div>