CSS3スタイルのチェックボックス - チェックボックスの右側にあるラベルテキストをインデント/左揃えしようとしています

Question

fontAwesomeを使用してCSS3スタイルのチェックボックスを使用しています。私が実行している小さなフォーマットの問題は、テキストの折り返しがチェックボックスの下に来ることです。ここでは、コードとフィドルは次のとおりです。

CSS：

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css); 

.wrapper { 
    width:300px; 
} 
input[type=checkbox].with-font { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 
input[type=checkbox].with-font ~ label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f1db"; 
    letter-spacing: 10px; 
    font-size: 1.2em; 
    color: #535353; 
    width: 1.4em; 
} 
input[type=checkbox].with-font:checked ~ label:before { 
    content: "\f00c"; 
    font-size: 1.2em; 
    color: darkgreen; 
    letter-spacing: 5px; 
} 
input[type=checkbox].with-font ~ label:before {   
    content: "\f096"; 
} 
input[type=checkbox].with-font:checked ~ label:before { 
    content: "\f046";   
    color: darkgreen; 
} 

はHTML：

<div class="wrapper"> 
    <input id="box1" type="checkbox" class="with-font" /> 
    <label for="box1">This is very long text that will wrap underneath the checkbox. Not sure how to flush it properly.</label> 
</div> 

JS Fiddle

理想的には私はこのようなテキストを、インデントと正当化したいと思います：

テーブルのラッピングや左浮動divのようないくつかの方法を試しましたが、チェックボックスからラベルを分離しようとするとCSSが壊れるようです。どんな方向にも大変感謝しています！

Answer 1

;）

HTML：

<div class="wrapper"> 
    <input id="box1" type="checkbox" class="with-font" /> 
    <label for="box1"> 
    <span class=text> 
     This is very long text that will wrap underneath the checkbox.  Not sure how to flush it properly. 
    </span> 
    </label> 
</div> 

CSS：

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css); 
    .wrapper { 
     width: 300px; 
     text-align: justify; 
     text-justify: inter-word; 
    } 

    input[type=checkbox].with-font { 
     border: 0; 
     clip: rect(0 0 0 0); 
     height: 1px; 
     margin: -1px; 
     overflow: hidden; 
     padding: 0; 
     position: absolute; 
     width: 1px; 
    } 

    input[type=checkbox].with-font ~ label:before { 
     font-family: FontAwesome; 
     display: inline-block; 
     content: "\f1db"; 
     letter-spacing: 10px; 
     font-size: 1.2em; 
     color: #535353; 
     width: 1.4em; 
    } 

    input[type=checkbox].with-font:checked ~ label:before { 
     content: "\f00c"; 
     font-size: 1.2em; 
     color: darkgreen; 
     letter-spacing: 5px; 
    } 

    input[type=checkbox].with-font ~ label:before { 
     content: "\f096"; 
    } 

    input[type=checkbox].with-font:checked ~ label:before { 
     content: "\f046"; 
     color: darkgreen; 
    } 

    .text { 
     margin-left: 10px; 
     position: absolute; 
     width: 250px; 
    } 

https://jsfiddle.net/0vpcwo53/

変更ログ：

HTML This is veryで

• ...今<span class=text></span>に囲まれてCSSで.wrapper
• におけるCSSの変更で
• は

の.text追加され、それがすべてです。