停止列表文本换行

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和醇标签一些余量。然而，这有一定的不利影响，当我有双重和三重数字。我不得不用这些利润作为IE的数字是被切断。我希望能回去使用list-style-position的inside并删除利润，但其下是不是我想要的数量的文本换行。

有谁知道如何关闭这个包裹？

Answer 1

如果你正在使用一个无序列表，这将始终以相同的空间量为标记使用list-style-position:outside;会更可行。由于您使用的是有序列表，我要坚持list-style-position:inside;。这个问题，因为你已经发现的是，IE和Firefox做相同的空间量的数字在标记的数量或字体大小的标志irregardless。因此，你需要创建自己的空间采取事态入你自己的手中。这里的关键是要知道，在默认情况下，IE和Firefox使用不同的属性来创建空间。 IE上margin（30分），而Firefox使用<ol>（40个像素）使用padding，所以你必须重置这两个值，以实现跨浏览器的幸福。

尝试这种情况：

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

Answer 2

尝试这种情况：

li { 
  white-space:nowrap;
}

Answer 3

的问题是，列表样式位置：内部“缩进标记和文本”。所以你永远不会达到你正在尝试用它做。 （ http://www.w3schools.com/CSS/pr_list-style-position .asp的）所以你唯一的选择是列表样式位置：外。

如果您的问题是，一些列表最多可以有9个项目（1位），其它的有99个项目（2位），还有一些有多达999项（3位），等等。我想说您有两个选择：

选项1：为每个列表不同的类（假设你提前知道时间的计数）。也许叫他们digits1，digits2，digits3等，所以1名列表，你可以使用：

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

选项2：完全放弃列表和只是使用表（我知道啊）。但是，你将保证适当的包装和缩进不管有多少项目在列表中。

Answer 4

li { white-space: nowrap; }

这将允许文字显示在同一行上。它可能会导致其他事情扩大水平为好。

li { overflow: hidden; }

也许在这种情况下不相关，但它会隐藏超出LI元件的固定宽度的任何文本。

另见破字：

li { word-wrap: break-word }

我觉得这个选择器具有在IE一些问题虽然。