オーダーリストの下に丸で囲まれたテキストが折り返されます

Question

更新： li項目のdiv内に2つのスパンを追加しました。今のところ私はリストを正しく整列させることができましたが、テキストの行全体が折り返しの代わりに次の行に移動します。

私New Fiddle for more info

当初発行チェックアウト： を私は関係なく、私がしようと何円、パディング及び背景色の境界線の半径を順序付けられたリストを作成しませんが、しました順序付きリスト番号の下にテキストが折り返されます。

問題：円内の順序付きリスト番号の下にテキストが折り返されないようにするにはどうすればよいですか？

は、ここに私の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

これはあなたが望むものですか？あなたの例では必ずしも円形ではなかったので、私はかなり変更しなければなりませんでした。それらの形状はウィンドウの幅に依存していました。
しかし、あなたがサークルをボーダーの内側に入れるかどうかはわかりません。手動でリスト項目のスタイルを設定する方法はありません

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>