html - 保留一个 ol 数和 overflow

Question

如果我在有序列表中使用 overflow:hidden，数字会消失，我如何才能保留它们并同时 overflow hidden 的字符？

li {
  overflow:hidden;
  max-width:70ch
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
  <li>Suspendisse venenatis arcu vitae tempor feugiat.</li>
  <li>Aenean pellentesque orci eu ligula venenatis sodales.</li>
  <li>Praesent sed quam et turpis accumsan luctus.</li>
  <li>Nullam sodales nisl eu ultricies convallis</li>
<ol>

Answer 1

设置list-style-position: inside在列表中，这会将数字放在列表项中:

ol {
  list-style-position: inside;
}

li {
  overflow: hidden;
  max-width: 70ch
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Suspendisse venenatis arcu vitae tempor feugiat.</li>
  <li>Aenean pellentesque orci eu ligula venenatis.</li>
  <li>Praesent sed quam et turpis accumsan luctus.</li>
  <li>Nullam sodales nisl eu ultricies convallis</li>
</ol>

另一种解决方案是滚动您自己的 CSS 并使用 CSS 计数器为元素自动编号:

/* counter */
ol {
  counter-reset: foo 0;
  list-style-type: none;
}
li {
  counter-increment: foo 1;
}
li:before {
  content: counter(foo) ".";
}
/* position */
li {
  padding-left: 2em;
}
li::before {
  float: left;
  margin-left: -2em;
  width: 1.75em;
  text-align: right;
}
li {
  overflow: hidden;
  max-width: 70ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Suspendisse venenatis arcu vitae tempor feugiat.</li>
  <li>Aenean pellentesque orci eu ligula venenatis.</li>
  <li>Praesent sed quam et turpis accumsan luctus.</li>
  <li>Nullam sodales nisl eu ultricies convallis.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Suspendisse venenatis arcu vitae tempor feugiat.</li>
  <li>Aenean pellentesque orci eu ligula venenatis.</li>
  <li>Praesent sed quam et turpis accumsan luctus.</li>
  <li>Nullam sodales nisl eu ultricies convallis. Nullam sodales nisl eu ultricies convallis.</li>
</ol>