Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make overflown text of one div to seamlessly move into another div

Tags:

html

css

Is there any jQuery plugin or CSS trick available which allows me to do this?

   +---------------+
   |This is a      |
   |very long      |
   |text in this   |
   |div which will |
   |overflow and   |
   +---------------+        

                      +---------------+
                      |spill into     |
                      |this div.      |
                      |               |
                      |               |
                      |               |
                      +---------------+

EDIT: These 2 divs can be located anywhere in the page and texts have to reside inside the divs.

like image 225
intellidiot Avatar asked Mar 06 '12 11:03

intellidiot


People also ask

How do you make a div go over another div?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do I align one div to another?

A div can have only one width and only one height, so it can only be a rectangle. You could insert your div1 into div2, and set the content of div2 (including div1) with float:left .

Can you have div on top of another?

Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want. You can use z-index: x; to set the vertical "order" (which one is "on top"). Replace x with a number, higher numbers are on top of lower numbers.


1 Answers

This is far from the best solution but from the top of my head I'd do it like this-ish:

http://jsfiddle.net/U79Kg/

This might not be what you're after but hopefully a pointer in the right direction!

like image 105
Henrik Andersson Avatar answered Oct 03 '22 02:10

Henrik Andersson