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

你可以这样做：

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

font-awesome 正确对齐多行文本

font-awesome aligning multi line text correctly

html

css

twitter-bootstrap

font-awesome