ラップテキスト

Question

を働いていない私はこのコードを持っている：

<div class="well details-form"> 
<div class="row"> 
     <div class="col-md-6">Test:</div> 
     <div class="col-md-6" style="white-space: pre-wrap">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div> 
    </div> 

</div> 

を私がラップする長いテキストが含まれているdivを取得しようとしています。それはちょうどテストですが、長さはと同じになる可能性があるため、ラッピングが必要です。

どのようにこれを折り返すのですか？

ここにはBootplyがあります。

何か助けていただければ幸いです。

Answer 1

white-space: pre-wrapの代わりにword-break: break-allを使用してください。

はMDNで続きを読む：本文中に遭遇したスペースがありますどこ https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

.details-form { 
 
    width: 70%; 
 
    margin: auto; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="well details-form"> 
 
    <div class="row"> 
 
    <div class="col-md-6">Test:</div> 
 
    <div class="col-md-6" style=" 
 
    word-break: break-all; 
 
">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div> 
 
    </div> 
 
</div> 
 

 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

スタイルstyle="white-space: pre-wrap"にのみ機能します。