只在div的边缘包装文本，而不是其他任何地方

Question

我目前有一个像这样的有序列表，其中数字和项目居中并左对齐：

我用这个css实现了这个目的：

ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;

word-break: break-word !important;
/*white-space: nowrap*/

}

我看到的问题是它奇怪地包装文本 - 如果它们比其他列表项长一定量，它将包装列表项（创建一个新行）。这会产生如上图所示的内容（或文本格式）：

1.Sleeping
  手袋
2.Tent
3.Food
4.Stove
5.Jackets
6.Bug Spray

注意手袋是如何在新线上的，但这不是div结束的地方。我尝试使用white-space: nowrap，但很明显，它会执行它所说的内容，然后长文本继续超出div而不会中断。

此外，它可能只是某种浏览器故障，因为有时当我回击并且页面被缓存时它将正确加载，并且在safari而不是chrome中似乎正常工作而没有{ {1}}。

任何帮助/想法，或者如果它只是一些奇怪的不可修复的事情，我很抱歉

Answer 1

您可以尝试以下代码：

working demo

div{text-align:center;}
ol
  {
   padding-left:1em;
   padding-right:1em;
   display: inline-block;
   text-align: left;
   word-break: break-word !important;
   /*white-space: nowrap*/

  }

Answer 2

给列表一个（更大）宽度：

ol {
  width: 200px;
  ... rest of CSS
}

至于调试，我经常添加一个border: 1px solid red;，这样你就可以看到元素的扩展程度。如果您将其添加到ol，您会看到它的宽度会导致换行。因此，将其做大应该可以解决问题。