用玻璃包裹长句

Question

尝试在玻璃中设置长句时，我遇到一个小UI问题，它显示如下：

有人知道将句子包装到下一行吗？自动换行css代码不起作用。

HTML代码：

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

感谢您的帮助。

Answer 1

如果你看here，你会找到默认的玻璃CSS。如果你看一下列表部分，你会发现这个宝石：

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

我不确定您是否可以在HTML中包含自定义CSS样式。如果你能做这样的事情：

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

如果API不接受以这种方式定义样式，则必须尝试内联执行此操作。每个li元素都需要：

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

Answer 2

如果用ol / li params太长，我不知道是否可以包装文本。但如果您愿意，可以使用表定义：

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

输出：