wrap text inside DIV with CSS?

Question

here is my fiddle, How do I wrap the content inside my DIV so it doesnt overlap my DIV? I know we can use

word-wrap: break-word;

but I have over 100 of these little "boxes" with numbers inside and I want everything to fit inside (about 4-5 digits long).

below is my css

thanks in advance

/* desk boxes*/
.desk_box_ver{ 
   width: 18px;
   height: 33px;
}   


.desk_box_hor{ 
  width: 23px;
  height: 10px;
}   


.desk_box_hor, .desk_box_ver { 
   position: absolute; 
   border: 4px solid black; 
   padding:10px;
}

It's a bit unclear what you want the end result to be. If the number doesn't fit inside, what should happen? — JJJ, Nov 24 '14 at 20:00
Are you asking how to scale the font size in order to fit inside the box, scale the box to fit around the number, or...? — Dryden Long, Nov 24 '14 at 20:00
text-wrap property is not supported in any of the major browsers. — Junaid, Nov 24 '14 at 20:00
@DrydenLong yes I want the numbers to fit inside the box and not overlap — alda1234, Nov 24 '14 at 20:02
@Juhana nothing should happen.. I just dont want the numbers to overlap.. — alda1234, Nov 24 '14 at 20:03
That still doesn't really clarify... Do you want the numbers to shrink or the box to grow? — Dryden Long, Nov 24 '14 at 20:03
@DrydenLong either, I'd like to see both solutions if possible so I can make a decision since I have multiple DIVs. — alda1234, Nov 24 '14 at 20:04
Obviously you want something to happen, otherwise you'd just use the code you have now. — JJJ, Nov 24 '14 at 20:07

LOTUSMS · Answer 1 · 2014-11-24T20:17:26.833

0

Delete this

.desk_box_hor{ 
   width: 23px;
   height: 10px;
 }

You are making the box larger than the numbers. They wont fit regardless, unless:

you make the font smaller;
white-space:wrap;
make the box size dynamic with padding

EDIT

To answer your response below

You can remove the inline styles via JQuery as follows:

$('.desk_box_hor').attr('style', function(i, style)
   {
   $(this).attr("style", "");
});

$('.desk_box_ver').attr('style', function(i, style)
   {
   $(this).attr("style", "");
});

Then apply css classes properly

edited Nov 24 '14 at 20:17

answered Nov 24 '14 at 20:05

LOTUSMS

10,317
15
71
140

I cant really delete the sizing of them since I have a lot.. look at this [example](http://jsfiddle.net/wq07030y/).. I have over 200 of them – alda1234 Nov 24 '14 at 20:08

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

In order to scale the text based on the size of the container, see this post here: how to set font size based on container size?

The accepted answer has the best and most reliable solution.

To scale the container around the text, you can simply remove the width and height for the CSS involving the containers. Here is an updated version of your fiddle where I just deleted the width and height: http://jsfiddle.net/3qrxezjv/

score 0 · Answer 3 · answered Nov 24 '14 at 20:08

Instead of imposing a fixed width, you could use min-width. This way the box won't be smaller than its content:

.desk_box_ver{ 
    min-width: 18px;
}   
.desk_box_hor{ 
    min-width: 23px;
}

/* desk boxes*/
.desk_box_ver{ 
 min-width: 18px;
 height: 33px;
} 
.desk_box_ver:hover{
 cursor: pointer;
}
.desk_box_hor{ 
 min-width: 23px;
 height: 10px;
} 
.desk_box_hor:hover{
 cursor: pointer;
}
.desk_box_hor, .desk_box_ver { 
 position: absolute; 
 border: 4px solid black; 
 padding:10px;
}

<div class="desk_box_hor" id="desk_H15" data-rel="236" style="left:325px;top:50px;">18556</div>
<div class="desk_box_ver" id="desk_I06" data-rel="219" style="left:93px;top:100px;">25753</div>

I updated my fiddle to show you an example of what I really have.. If it does expand the width . will it overlap the one next to it? — alda1234, Nov 24 '14 at 20:13
@alda1234 Yes, if the boxes are close, they may overlap when they grow. — Oriol, Nov 24 '14 at 20:31

wrap text inside DIV with CSS?

3 Answers3