Nur Text am Rand des div wickeln, nicht anderswo

Question

Ich habe zur Zeit eine geordnete Liste wie dieser, wo die Zahlen und Elemente sind zentriert und ausgerichtet links:

ich erreicht das diese mit CSS:

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

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

} 

Das Problem, das ich sehe, ist, dass es sich um Text seltsam Wraps - es wird Listenelemente wickeln (eine neue Zeile erstellen), wenn sie eine bestimmte Menge mehr als die anderen Listenelemente sind. Dies schafft Dinge wie im Bild oben (oder im Textformat):

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

Beachten Sie, wie die Bags in einer neuen Zeile ist, aber das ist nicht, wo das div endet. Ich habe versucht mit white-space: nowrap, aber offensichtlich das tut, was es sagt und lange Text dann weiter über die div ohne zu brechen.

Auch kann es nur eine Art von Browser-Glitch sein, weil manchmal, wenn ich wieder getroffen und die Seite zwischengespeichert wird es korrekt geladen wird, und in Safari statt Chrom es scheint ohne white-space: nowrap richtig zu arbeiten.

Jede Hilfe/Ideen geschätzt, oder wenn es nur einige seltsame unfixable Sache ist, es tut mir leid

Answer 1

die Liste Geben Sie eine (größere) Breite:

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

Wie für das Debuggen, füge ich oft a border: 1px solid red; so können Sie sehen, wie weit das Element reicht. Wenn Sie es zu ol hinzufügen, werden Sie sehen, dass die Breite den Zeilenumbruch verursacht. Also sollte es größer werden.

Answer 2

Sie Unten Code versuchen:

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

    }