这是jsfiddle fiddle
代码:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE@._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
答案 0 :(得分:4)
你可以用一些css来解决这个问题:
.wrap-text {
word-wrap: break-word;
}
然后:
<p class="wrap-text">asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
答案 1 :(得分:1)
将word-break:break-word
添加到其容器中
见下面的片段或小提琴&gt; jsFiddle
.col-xs-7{
word-break:break-word;
}
&#13;
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE@._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
&#13;
但我建议你不要使用纯文本。而是将所有文本包装在标记内,例如<p>
,如下所示:
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
(也使用break-word
)