wrap long sentence in glass

Question

I have a small UI problem when trying to set a long sentence in glass, it displays like that:

Does anybody have an idea of wrapping the sentence to the next line? word wrap css code didn't work.

HTML Code:

<article>
<section>
<h1>Notes:</h1>
<ol class="text-x-small">
<li>Don't take the green one</li>
<li>Don't forget to check about the promotion we have tomorrow</li>
</ol>
</section>
<footer>
<p>Notes</p>
</footer>
</article>

Thanks for helping.

Answer 1

If you look here you'll find the default glass CSS. If you look under the lists section you'll find this gem:

ul li, ol li {
  border-bottom: 1px solid #333;
  padding: 6px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

I'm not sure if you can include custom CSS styles in your HTML. If you can do something like this:

<article>
<style>
  .wrap-li {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
</style>
<section>
<h1>Notes:</h1>
<ol class="text-x-small">
<li class="wrap-li">Don't take the green one</li>
<li class="wrap-li">Don't forget to check about the promotion we have tomorrow</li>
</ol>
</section>
<footer>
<p>Notes</p>
</footer>
</article>

If the API doesn't accept defining styles in this way, you'd have to try to do this inline. Each li element would need to be:

<li style="white-space:normal;text-overflow:clip;overflow:visible">Don't take the green one</li>

Answer 2

I don't know if it is possible to wrap the text if it is too long with ol/li params. But you can make it with a table definition if you want:

<article>
  <section>
    <h1>Notes:</h1>
    <table class="text-x-small">
      <tbody>
        <tr>
          <td>
            Don't take the green one
          </td>          
        </tr>
        <tr>
          <td>            
            Don't forget to check about the promotion we have tomorrow
          </td>          
        </tr>
      </tbody>
    </table>
  </section>
  <footer>
    <p>Notes</p>
  </footer>
</article>

Output: