Html 仅在div的边缘换行，而不是在其他任何地方

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

我使用css实现了这一点：

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

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

}

我看到的问题是，它奇怪地包装文本——如果列表项比其他列表项长一定量，它将包装列表项（创建新行）。这会在上面的图片（或文本格式）中创建类似的内容：

1.睡觉
行李
2.帐篷
3.食物
4.炉子
5.夹克
6.杀虫剂

注意行李是如何在新行上的，但这不是div结束的地方。我试着使用

空白：nowrap

，但很明显，这就是它所说的，然后长文本在

div

之外继续而不中断

此外，这可能只是某种浏览器故障，因为有时当我回击并缓存页面时，它会正确加载，在safari而不是chrome中，它似乎在没有

空白：nowrap

的情况下正常工作

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

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

---

至于调试，我经常添加一个

边框：1px实心红色这样您就可以看到元素扩展了多远。如果将其添加到
ol
中，您将看到它的宽度导致换行。因此，将其变大应该可以做到这一点。
您可以尝试以下代码：


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

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*/

  }