html - 无序列表的问题

Question

所以我有一个“热门新闻文章”列表，它只占页面一侧的一小部分。 但是如果标题比 div 的宽度长，它不会中断句子。它只是将整个内容放在下一行。 我一直没能找到解决办法。

http://codepen.io/anon/pen/WrjPQo

<li>
    <p class="number">1</p>
    <a href="#"><h3>Virtual Reality Being Used in School</h3></a>
</li>

谢谢

Answer 1

您可以通过在 H3 中添加数字来解决此问题。

或者你甚至可以使用列表的编号，或者 H3 的 ::before 伪元素来生成编号，所以你甚至不需要它的标记。

下面的例子展示了后者。样式不完美，只是展示了如何在没有标记的情况下添加数字。

ul.headings {
 list-style-type: none; 
}
.headings {
  counter-reset: header-counter;
}
.headings li::before {
  /* Showing and incrementing the counter */
  content: counter(header-counter);
  counter-increment: header-counter;

  /* Some styling to make it red and round and white, etc. */
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: red;
  color: white;
}

<ul class="headings">
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>