1

I have a nested div. I want to show text inside description but the problem is , text goes outside div. I want to go into the new line(like <br/>) and shows all text. I don't want to use 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>
Matt
  • 14,906
  • 27
  • 99
  • 149
Steven Lury
  • 47
  • 2
  • 9

2 Answers2

0

Take a look at the following after, should help you on the way:

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

Community
  • 1
  • 1
William Troup
  • 12,739
  • 21
  • 70
  • 98
0

Just Add "word-wrap:break-word;" style in your div as below:

<div class="col-lg-7" style="word-wrap:break-word"> dflsfljdlfsdfsfldksfslsjffldfjjffjdslkfsdfjdljdslffjfjfjfjfdklfjsfjj</div>
                                       </div><hr />
Gaurav Jariwala
  • 523
  • 2
  • 12