Customizing where a div wraps to

Question

Is it possible to have two divs wrap as if their one line?

<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>

so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like

AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB

I'm trying to accomplish this with JavaScript, jQuery, and css3.

score 6 · Accepted Answer · answered Jun 01 '14 at 05:19

6

This could actually be done just by using CSS and playing with the div positions and the line heights.

For example:

.multiLine {
    position:relative;
    width:100px;
    eight:100px;
}

.topLine {
    position:absolute;
    word-break:break-all;
    line-height:40px;
    top:20px;
}

.bottomLine {
    position:absolute;
    word-break:break-all;
    line-height:40px;
}

This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.

EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/

answered Jun 01 '14 at 05:19

Alvaro Montoro

28,081
7
57
86

@Monty82: where were you all these days? Welcome to StackOverflow :) +1 – naveen Jun 01 '14 at 05:27
I did'nt think this would work for me at first but i understand the important part now, the top setting, by stacking them and then offsetting one i get two rows, brilliant. thanks. – mpaquette Jun 01 '14 at 05:39

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

0

You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!

Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript

edited May 23 '17 at 12:11

Community

1
1

answered Jun 01 '14 at 05:08

Bobz

2,394
1
19
20

This is close to what i was thinking i would have to do. It's actually images I'm wrapping top line is a musical staff and bottom line is tablature, i wanted to be able to resize the window and have the two staffs wrap dynamically as one row – mpaquette Jun 01 '14 at 05:38

Customizing where a div wraps to

2 Answers2