Search code examples
google-glassgoogle-mirror-api

wrap long sentence in glass


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

enter image description here

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.


Solution

  • 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>