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,007
  • 25
  • 88
  • 136
Steven Lury
  • 47
  • 2
  • 8

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
williamtroup
  • 12,091
  • 20
  • 66
  • 95
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
  • 11