视口约束时在列表上保留缩进

Question

我正在设计CMS输出的列表。我只能在外部div上插入类。 HTML的结构如果已修复。

我在技巧之前/之后使用，以便给出一个字体很棒的图标作为项目符号点但是当视口受到约束并且点溢出到第二行时它看起来很糟糕，特别是当只有一两个单词溢出时。

有没有办法可以保留溢出文本的缩进？

这是我的标记：

.green-tick-list li:before {    
font-family: 'FontAwesome';
content:"\f00c";
margin:0 5px 0 -15px;
color: #33cc33;
}
.green-tick-list li{
    list-style: none;
    font-size: 1em;
    line-height: 1.6em;
}

#responsive{
  width: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
  <div class="fl-module-content fl-node-content">
    <div class="fl-rich-text">
      <ul>
        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
        <li>Lorem Ipsum is simply.</li>
        <li>Lorem Ipsum is simply dummy text of the printing.</li>
        <li>Lorem Ipsum.</li>
        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
      </ul>
    </div>
  </div>
</div>
<h3>Simulating restricted viewport</h3>
<div id="responsive">
  <div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
  <div class="fl-module-content fl-node-content">
    <div class="fl-rich-text">
      <ul>
        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
        <li>Lorem Ipsum is simply.</li>
        <li>Lorem Ipsum is simply dummy text of the printing.</li>
        <li>Lorem Ipsum.</li>
        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
      </ul>
    </div>
  </div>
</div>
</div>

我希望溢出文本的缩进与文本的开头一致。这可能吗？