wrap long sentence in glass - google-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: