Shift content to next line if horizontal scroll is present using javascript/jquery and css

Question

I have a section containing several div...whenever horizontal scroll is present into the section, how can i shift the hidden div to next line...

HTML

<section id="a">
<div class="num">
<div class="num">
<div class="num">
<div class="num">
<div class="num">
<div class="num">
</section>

CSS

.num
{
 position: relative;  display: table-cell;
}

use `display: inline-block` instead of `display: table-cell` .. or just `float: left`. — Mr_Green, Mar 20 '14 at 06:36
i want to do it using javascript...not plain css...i want to render differently in different screen — ghost..., Mar 20 '14 at 06:38
@shaleen that happens automatically if you use css. I can't see why you want to do this using javascript? — Mr_Green, Mar 20 '14 at 06:39
in mac book i want scroll option and in desktop i don't want scroll.. — ghost..., Mar 20 '14 at 06:41
Your explanation is not clear. what I understand is that you want to show the `div` elements in one line in Mac and more than one line in Windows, such that there will be no horizontal scroll. is it correct? — Mr_Green, Mar 20 '14 at 06:44
@shaleen I think you need to find the OS version and then implement as needed. please refer this [link](http://stackoverflow.com/q/9514179/1577396). — Mr_Green, Mar 20 '14 at 06:47

score 1 · Accepted Answer · answered Mar 20 '14 at 07:00

I believe you need two things:

Media queries because you should be testing and designing based on screen size, not necessarily individual devices like you appear to be wanting to do.

word-wrap:break-word; because this will prevent a horizontal scroll appearing if one of the div elements are too long - the element's content will simply jump to the next line.

You'd find a suitable screen size by which you wish to do your nextline-shifting at and apply word-wrap:break-word; to the div.num elements inside.

Then, in your media query for larger devices, you simply wouldn't include it, and your div elements will keep to one line with a horizontal scroll if necessary.

Shift content to next line if horizontal scroll is present using javascript/jquery and css

1 Answers1