包長句玻璃

Question

試圖設置在玻璃長句子時，我有一個小的用戶界面問題，它會顯示這樣的：

是否有人有包裝的句子到下一個想法線？自動換行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 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> 

輸出：