font-awesome正确对齐多行文本

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

你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;