CODEWITHSUNDEEP
javascriptjquerycss
Schlaus
Schlaus

Reputation: 19212

Define text wrapping point outside the parent element?

Is it possible, using CSS/JS/jQuery/etc. to define the wrapping point for text outside the parent element?

The reason for me asking this is that I'd like to be able to split text into smaller pieces while still giving the impression that it's all contained in one element. For example imagine a div that's 300px wide and tall, and has text as it's content. I'd like to be able to split this div into a grid of 3 x 3 divs that are all 100px x 100px but give the appearance of continuous text, by manipulating text positioning inside the smaller divs.

Since this is a bit hard to explain, here's an image of what I mean:

enter image description here

Reason I want to do this is because I want to be able to do some CSS3 3D transformations with the text without turning into an image, see for example http://www.joelambert.co.uk/flux/ --> Tiles3D

Is this possible?

Upvotes: 2

Views: 136

Answers (2)

nirazul
nirazul

Reputation: 3955

If you want to achieve a blockwise 3D transform effect, there may be another solution:

You could duplicate the text-div into every div block and position it with position: absolute; in every block and hide it with overflow: hidden;. You will then have again the impression that this is one big text block.

Then you are able to transform those divs blockwise.

I built a short Fiddle to show you how I mean it, should work quite well:

JS-Fiddle

Upvotes: 2

defau1t
defau1t

Reputation: 10619

Maybe CSS3 Columns can help:

#con{background-color: #DDDDDD;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #888888;
text-align: left;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 35px;
-moz-column-gap: 35px;
column-gap: 35px;
}

jsFiddle

Upvotes: 0

Related Questions