Any way to have text in div fill a triangle shape?

I'm trying to have a block of text in a div fill a downward triangle shape. Is there any way to achieve this with either CSS or Javascript?

This is for a site in which users can dynamically insert text. I'm trying to avoid the alte开发者_Python百科rnative method, which is to have them insert text line by line with a limit on each line.

I don't know of any simple way to do what you are asking for. The best thing I can think of would be to use something like the CSS text wrapper, which can fit your text to any shape. I haven't used it myself so I don't know what problems you will run into.

Your question is very similar to this one.

I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.

See this demo: http://jsfiddle.net/gilly3/CmguZ/7/

You could wrap each line of your text with a <span> and use margins to recieve the wanted affect and if you want the shape to have a color use photoshop to create a triangle with the desired color and put it on the background.

you can try playing with CSS border slopes, but I don't think it fits your needs entirely, because it's a bit complicated and you have to wrap the text manually. there are some good examples of this method here, but it is for simple shapes basically, not for text containers.