Question

我有一个嵌套的div。我想在描述中显示文字，但问题是，文本在div之外。我想进入新行（如<br/>）并显示所有文本。我不想使用overflow：hidden。

<div class="row">
                            <div class="col-lg-8" id="showPos" style="height: 295px;">
                                <script>
                                    $(document).ready(function(){
                                        showPosition(<?php echo $results['lat']; ?>,<?php echo $results['lon'];?>);
                                    });
                                </script>
                            </div>
                            <div class="col-lg-4" >
                                   <div class="well">
                                       <div class="row">
                                           <div class="col-lg-5"><i class="fa fa-info-circle" aria-hidden="true"></i> Title</div><div class="col-lg-7">bad hurricane</div>
                                       </div><hr />
                                       <div class="row">
                                           <div class="col-lg-5"><i class="fa fa-info" aria-hidden="true"></i> Description</div><div class="col-lg-7"> dflsfljdlfsdfsfldksfslsjffldfjjffjdslkfsdfjdljdslffjfjfjfjfdklfjsfjj</div>
                                       </div><hr />
                                       <div class="row">
                                           <div class="col-lg-3"><i class="fa fa-heart" aria-hidden="true"></i><h6>10</h6></div>
                                           <div class="col-lg-3"><i class="fa fa-road" aria-hidden="true"></i><h6>10</h6></div>
                                           <div class="col-lg-3"><i class="fa fa-eye" aria-hidden="true"></i><h6>10</h6></div>
                                       </div>
                                   </div>
                               </div>
                            </div>

Answer 1

看看下面的内容，应该在路上帮助你：

CSS: How do I wrap text with no whitespace inside a <td>?

Answer 2

添加＆＃34;自动换行：break-word;＆＃34; div中的样式如下：

<div class="col-lg-7" style="word-wrap:break-word"> dflsfljdlfsdfsfldksfslsjffldfjjffjdslkfsdfjdljdslffjfjfjfjfdklfjsfjj</div>
                                       </div><hr />

文本溢出div

2 个答案: