Text wird unterhalb einer geordneten Liste mit einem Kreis umbrochen

Question

UPDATE: Ich fügte zwei Spannen in einem div innerhalb des Li-Elements hinzu. Bisher habe ich fast die Liste richtig ausgerichtet, aber jetzt verschiebt sich die gesamte Textzeile in die nächste Zeile anstatt in die Zeilenumbruch.

Check out my New Fiddle for more info

Erstausstellung: ich eine geordnete Liste mit einem Rand Radius eines Kreises, Polsterung und Hintergrundfarbe erstellt haben, aber egal was ich versuche, die Der Text wird unterhalb der sortierten Listennummer umbrochen.

Ausgabe: Wie kann ich verhindern, dass der Text unterhalb der geordneten Listennummer innerhalb des Kreises gewickelt wird?

Hier ist mein Fiddle of the issue

HTML

<div class="child"> 
<div class="child2"> 

<h3 class="title"> 
ddddddddd dddddddddd ddddddddd ddddddddddddddddd 
</h3> 
<ol class="circlegroup"> 
<li>1 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li> 
<li>2 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li> 
<li>3 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dd dddd</li> 

CSS:

body {min-height:100%!important; height:100%!important;} 

html {min-height:100%!important; height:100%!important;} 

.parent {background:yellow; width:100%; height:100%; display: table; 
} 

.child {background:red; width:70%; display: table-cell; 
    vertical-align: middle;} 

    .child2 {background:#fff; width:100%; display:inline-block; 
    vertical-align: middle;} 

    .circlegroup { } 

.circlegroup li { 
    list-style:none; 
    width:auto; margin-left:10%; 
    height: auto; 
    border: 1px solid #d3d3d3; 
    word-wrap: break-word; 

    margin-bottom:40px; 
} 

.title {margin-left:10%;} 


ol { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px; } 

ol li {color:#666; } 

ol li:first-letter {color:#fff; background:#333; border-radius:50%; border: 5px solid #333;font-size:4vw; vertical-align:middle; 
    behavior: url(PIE.htc);padding-left:2%; padding-right:2%; padding-top:0%; padding-bottom:0%; font-weight:bold; margin-right:1vw; height:100%; list-style-position:outside;} 


ol li 
{ list-style-position:outside; 

} 

Answer 1

Ist das was du willst? Ich musste mich ziemlich ändern, besonders um die Kreise um die Ziffern richtig zu machen, weil sie in deinem Beispiel nicht immer kreisförmig waren. Ihre Formen hing von der Breite des Fensters ab.
Aber jetzt bin ich nicht sicher, ob Sie die Kreise innerhalb der Grenzen haben wollten oder nicht.

html, body { 
 
    padding:0; margin:0; 
 
    min-height: 100% !important; 
 
    height: 100% !important; 
 
} 
 

 
.parent { 
 
    background: yellow; 
 
    width: 100%; height: 100%; 
 
    display: table; 
 
} 
 

 
.child { 
 
    background: red; 
 
    width: 70%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.child2 { 
 
    background: #fff; 
 
    width: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.title { 
 
    margin-left: 10%; 
 
} 
 

 
.circlegroup { 
 
    counter-reset:circle; 
 
    list-style: none; 
 
    padding-left: 10px; 
 
    text-indent: 0px; 
 
    margin-left: 5px; 
 
} 
 

 
.circlegroup li { 
 
    min-height: calc(7vw - 40px); 
 
    list-style: none; 
 
    width: auto; 
 
    margin-left: 10%; 
 
    border: 1px solid #d3d3d3; 
 
    word-wrap: break-word; 
 
    margin-bottom: 40px; 
 
    color: #666; 
 
    position:relative; 
 
} 
 

 
.circlegroup li:before { 
 
    counter-increment: circle; 
 
    content:counter(circle); 
 
    color: #fff; 
 
    background: #333; 
 
    border-radius: 50%; 
 
    font-size: 4vw; line-height:1ch; 
 
    box-sizing:content-box; 
 
    width:1ch; height:1ch; padding:1ch; 
 
    behavior: url(PIE.htc); 
 
    font-weight: bold; 
 
    margin-right: .25em; 
 
    position:absolute; top:0; right:100%; 
 
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 

 
<div class="container parent"> 
 

 
    <div class="child"> 
 
    <div class="child2"> 
 

 
     <h3 class="title"> 
 
ddddddddd dddddddddd ddddddddd ddddddddddddddddd 
 
</h3> 
 
     <ol class="circlegroup"> 
 
     <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li> 
 
     <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li> 
 
     <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dd dddd</li> 
 
     <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddssddddddddddddddddddddd</li> 
 
     <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 

 
</div>