How to make text continue to new line when reach end of div

Question

I want that a text inside a div will continue in a new line when reaching the border of the div, and not overflow.

I tried using "word-break" and all kind of overflow properties, yet I didn't succeed to solve my problem.

<div class="col-lg-3">
     <div>  
          <h2>
               <a >
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </a>
          </h2>
     </div>
</div>

I want that the text inside the tags will continue in new line and not overflow.

Thanks

Standard behaviour is that text continues on a new line when it reaches the end. If it doesn't do that then it has to be explicitly set somewhere. We don't know your CSS so we can't say where — cloned, Jul 25 '19 at 06:48
Possible duplicate of [
when text exceeds width, continue in new line](https://stackoverflow.com/questions/13790170/p-when-text-exceeds-width-continue-in-new-line) — Roma, Jul 25 '19 at 07:08

score 1 · Answer 1 · answered Jul 25 '19 at 06:50

You can use overflow-wrap: break-word; or word-wrap: break-word; to do this.

Demo:

h2 {
  overflow-wrap: break-word;
}

<div>  
          <h2>
               <a >
                 long text that overflow ....................................................................................................................................................................................................................................................................................................
               </a>
          </h2>
   </div>

Selva Supriya VS · Answer 2 · 2019-07-25T13:01:45.090

-1

use thisoverflow-wrap: break-word

<div class="col-lg-3">
    <div>  
          <h2 style="overflow-wrap: break-word">
               <a >
                 long text that overflow long ........... ............................................................................................................................
               </a>
          </h2>
   </div>
</div>

edited Jul 25 '19 at 13:01

answered Jul 25 '19 at 07:00

Selva Supriya VS

370
1
4
11

How to make text continue to new line when reach end of div

2 Answers2