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

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>