font-awesome 正确对齐多行文本
font-awesome aligning multi line text correctly
我有一个图标,右边有文字,如下所示:
<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.
使文本与多行完全对齐的最佳方法是什么?我有一些技巧,但想正确地完成它。
你可以这样做:
.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>
我有一个图标,右边有文字,如下所示:
<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.
使文本与多行完全对齐的最佳方法是什么?我有一些技巧,但想正确地完成它。
你可以这样做:
.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>