2017-01-03 54 views
0

我有這樣的代碼:環繞文本使用預裹不工作

<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

任何幫助表示讚賞。

回答

3

使用word-break: break-all而不是white-space: pre-wrap

更多的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>

+0

當我使用'word-break'的時候'break-word'不存在..我有'break-all'和其他的但不是'break-word' –

+0

@BviLLe_Kid'break-all'應該能夠工作 - 忘了'word-break'是WebKit/Blink特定的。更新了我的答案。 –

+0

明白了,那就做到了。謝謝! –

0

風格style="white-space: pre-wrap"只能在那裏有一個在文本中的一個空間。

+0

好的,所以我做了[這個](http://www.bootply.com/4aBCiRECXC)..我怎麼把div放在井裏面? –