Text inside of <li> tag goes out of screen
<p>I have some long text in a <code>&lt;li&gt;</code> tag and it goes out of screen when the screen is narrow.</p>

<p>I've tried to correct this with <code>width: 100%;</code> but nothing happens. Additionally, the text should not have a fixed width, it must be responsive.</p>

<p>This is my code structure:</p>

<pre><code>&lt;div class="absolute-pos inline-block"&gt;
  &lt;li&gt;
      &lt;div&gt;
      &lt;span&gt;
          some really really loooonnnnggg teeeeeexxxxttttt hheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrreeeee
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/li&gt;
&lt;/div&gt;

.absolute-pos {
  position: absolute;
}
.inline-block {
  display: inline-block;
}
</code></pre>

<p>jsfiddle: <a href="https://jsfiddle.net/xLm5hL3w/" rel="nofollow">https://jsfiddle.net/xLm5hL3w/</a></p>