在列表中停止文本换行

Question

我有一个有序列表：

<ol>
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li>
<li>This is the Second g</li>
<li>This is the Third g</li>
<li>This is the fourth g</li>
<li> <strong>This is the fifth g</strong> </li>
<li>This is the seventh g</li>
<li>This is the eight g</li>
<li>This is the ninth g</li>
<li>This is the tenth g</li>
<li>This is the eleventh g</li>
<li>This is the twelvth g</li>
</ol>

它的呈现如下所示：

1.  They used to bring concerns about their children or their marriages. But
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran
    minister in Springfield, Ill., about their financial worries, and that puts
    him in the unusual position of dispensing investment advice.
2.  This is the Second g
3.  This is the Third g
4.  This is the fourth g
5.  This is the fifth g
6.  This is the seventh g
7.  This is the eight g
8.  This is the ninth g
9.  This is the tenth g
10. This is the eleventh g
11. This is the twelvth g

当我有很多文本时，我希望它像上面那样格式化。我可以通过设置以下内容来实现这一点：

list-style-position:outside;

我需要调整li和ol标签的一些边距。然而，当数字是双位或三位数时，这会产生一些不良影响。因为在IE中，数字被截断了。我想能够回到使用list-style-position属性，并删除边距，但文本将换行到数字下面，这不是我想要的。

有人知道如何关闭这个自动换行吗？

- John Daly

Answer 1

试试这个：

li { 
  white-space:nowrap;
}

- Chris Doggett

---

谢谢，但那样会把所有内容都放在一行上。我需要像上面那样格式化以处理大量文本。 - John Daly

Answer 2

使用list-style-position: outside;会更容易实现，如果您使用的是无序列表，则标记始终需要相同的空间。由于您正在使用有序列表，因此我建议使用list-style-position: inside;。问题在于，正如您发现的那样，IE和Firefox为标记创建的空间量不考虑标记中数字的位数或字体大小而相同。因此，您需要自己创建空间。这里的诀窍是知道，默认情况下，IE和Firefox使用不同的属性来创建空间。IE在<ol>上使用margin（30个点），而Firefox使用padding（40像素），因此您需要重置这些值以实现跨浏览器兼容性。

请尝试以下方法：

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}

- David Kolar

Answer 3

li { white-space: nowrap; }

这将使文本显示在同一行上。它可能会导致其他东西水平扩展。

li { overflow: hidden; }

这种情况可能并不相关，但它将隐藏超出LI元素固定宽度的任何文本。

另请参见break-word：

li { word-wrap: break-word }

我认为这个选择器在IE中存在一些问题。

- jthompson

---

很不幸，我只是不希望文本环绕在项目符号周围，而是垂直向下换行。我需要一些换行，因为我需要能够显示所有的文本，无论大小如何。 - John Daly

我认为 { word-wrap: break-word } 实际上是仅适用于IE的属性。 - Karl Johan

Answer 4

问题在于list-style-position:inside "缩进标记和文本"。因此，您将永远无法使用它实现您想要的效果。（http://www.w3schools.com/CSS/pr_list-style-position.asp）所以您唯一的选择是list-style-position:outside。

如果您的问题是某些列表最多可以有9个项目（1位数字），其他列表最多可以有99个项目（2位数字），而另一些列表最多可以有999个项目（3位数字）等等。我会说您有两个选择：

选项1：为每个列表创建不同的类（假设您提前知道计数）。也许称它们为digits1、digits2、digits3等等。因此，对于1位数字列表，您将使用：

<ol class='digits1'>
  <li>item</li>
  ...
</ol>

选项2：完全放弃列表，只使用表格（我知道这很糟糕）。但是，无论列表中有多少项，您都可以保证正确的换行和缩进。

- Keltex