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.臭虫喷雾

注意Bags在新行中的位置，但是那不是div结束的地方。我尝试使用white-space: nowrap，但是很明显，它做到了，然后长文本超出了div而没有中断。

另外，这可能只是某种浏览器故障，因为有时当我回击并缓存页面时，它将正确加载，并且在Safari中而不是chrome中，如果没有white-space: nowrap，它似乎可以正常工作。

任何帮助/想法表示赞赏，或者如果这只是一些不可解决的怪异事情，对不起

最佳答案

您可以尝试以下代码：

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

  }

关于html - 仅在div的边缘换行，而不在其他任何地方换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37650643/