Text come out of div when set div's width by percentage

Question

This is my html:

<div class="targetdiv">My Text that come out of div</div>
<style>
  .targetdiv{
     width: 24%;
     border: 1px solid red;
  }
</style>

with the above design my text come out of div. But if I change the width and use pixel instead of percentage every thing would be OK:

<style>
  .targetdiv{
     width: 190px;
     border: 1px solid red;
  }
</style>

So how could I use percentage in width and my text remain inside of div? any suggestion?

the percentage is related to the width of the parent. So you need to wrap the targetDiv inside a wrapper with fixed length — Fabrizio Calderan, Apr 15 '14 at 07:36
how does the text "come out of div"? This html should just break line and grow in height. http://jsfiddle.net/8SJ8E/ — Marcel, Apr 15 '14 at 07:46

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

You can use this class:

<style>
.targetdiv {
       width: 190px;
       border: 1px solid red;
       white-space: pre-wrap;      /* CSS3 */   
       white-space: -moz-pre-wrap; /* Firefox */    
       white-space: -pre-wrap;     /* Opera <7 */   
       white-space: -o-pre-wrap;   /* Opera 7 */    
       word-wrap: break-word;      /* IE */
    }
</style>

Original answer was posted by Aaron Bennett here: Is there a way to word-wrap long words in a div?

And here is a working fiddle:

http://jsfiddle.net/LRpve/

edited May 23 '17 at 12:21

Community

1
1

answered Apr 15 '14 at 07:42

Mohamed Elgharabawy

366
4
12

As I mentioned I need to use percentage in width, so the width be `24%` and in this case your answer not worked – Saeid Alizade Apr 15 '14 at 08:03

Text come out of div when set div's width by percentage

1 Answers1