字体真棒对齐多行文本正确

我有文字的它像这样右侧的图标：字体真棒对齐多行文本正确

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

什么是完全有文本的最佳方式与多行对齐？我有一些黑客，但想要正确地做。

来源

2016-01-23 shell

你可以做这样的：

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

来源

2016-01-23 01:41:16 Trix

字体真棒对齐多行文本正确

回答

相关问题