title: How to word-break in horizontal list items using CSS
body: <p>I'd like to create a horizontal list and enable word-break inside li. </p>
  
  <p>The example below outputs like this:</p>
  
  <pre><code>|---------element width---------|
  abcdefghij ABCDEFGHIJ 
  aaaaaaaaaaaaaaaaaaaaaaaaaa   
  </code></pre>
  
  <p>This is what I want:</p>
  
  <pre><code>|---------element width---------|
  abcdefghij ABCDEFGHIJ aaaaaaaaaa
  aaaaaaaaaaaaaaaa   
  </code></pre>
  
  <p>I tried float left, other break-word css, specifying width or max-width, etc.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li { display : inline-block; word-break : break-all; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>            &lt;ul&gt;
                  &lt;li&gt;abcdefghij&lt;/li&gt;
                  &lt;li&gt;ABCDEFGHIJ&lt;/li&gt;
                  &lt;li&gt;aaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/li&gt;
              &lt;/ul&gt;
   </code></pre>
  </div>
  </div>
  </p>