обернуть длинное предложение в стекле

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

я не уверен, если вы можете включить пользовательские стили CSS в вашем HTML. Если вы можете сделать что-то вроде этого:

<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. Но вы можете сделать это с определением таблицы, если вы хотите:

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

Выход: