不要在复选标记下放置新行文本

Question

如果复选标记旁边的文本进入新行，我怎样才能使它具有左边距？因此，任何较长的句子都应该在该句子的第一个字母下准确断开......所以 - 当有一个更大的句子时，复选标记下面的空格应该保持空白。这里有一支笔来演示：

https://codepen.io/anon/pen/oyGBrX

.text {
margin-left: 35px;
}
.text:before {
font-family: FontAwesome;
content: 'f00c';
font-size: 20px;
color: red;
position: relative;
top: 2px;
margin-right: 10px;
}

Answer 1

您可以在标记上使用绝对位置，这样它就不会影响文本

查看代码片段

.text {
padding-left: 35px;
padding-top:5px;
position: relative
}
.text:before {
font-family: FontAwesome;
content: 'f00c';
font-size: 20px;
color: red;
position: absolute;
top: 0px;
left: 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="text-container">
<div class="col-sm-4 col-xs-6">
<p class="text">Small amount of text</p>
</div>
</div>
<div class="text-container">
<div class="col-sm-4 col-xs-6">
<p class="text">Large amount of text and more text lorem This should start under the "Large", and have a left margin, so the space under the checkmark is empty</p>
</div>
</div>