Aligning text in a geomatric shaped div - css

Question

Can i align a text in a div with a geometric shape, like this
https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ5z8OYxnypDr09mmfFMunJj31x_XtfG3MFj0vlAa_ceoCnts0OfQ
without hiding some of text?
Update:
I need something like this, above is a circle, but also i need something like this for parallelogram:
http://i39.tinypic.com/4r2ikm.jpg

Answer 1

Here's a js fiddle code
fiddle
Found it some where.
Here's the script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var text = "'Twas the night before Christmas, when all through the house, Not a creature was stirring, not even a mouse. And so begins the story of the day of Christmas";
var font = "12pt verdana";
var textHeight = 15;
var lineHeight = textHeight + 5;
var lines = [];
var cx = 150;
var cy = 150;
var r = 100;
initLines();
wrapText();
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.strokeStyle = "skyblue";
ctx.lineWidth = 2;
ctx.stroke();
// pre-calculate width of each horizontal chord of the circle
// This is the max width allowed for text
function initLines() {
for (var y = r * .90; y > -r; y -= lineHeight) {
var h = Math.abs(r - y);
if (y - lineHeight < 0) {
h += 20;
}
var length = 2 * Math.sqrt(h * (2 * r - h));
if (length && length > 10) {
lines.push({
y: y,
maxLength: length
});
}
}
}
// draw text on each line of the circle
function wrapText() {
var i = 0;
var words = text.split(" ");
while (i < lines.length && words.length > 0) {
line = lines[i++];
var lineData = calcAllowableWords(line.maxLength, words);
ctx.fillText(lineData.text, cx - lineData.width / 2, cy - line.y + textHeight);
words.splice(0, lineData.count);
};
}
// calculate how many words will fit on a line
function calcAllowableWords(maxWidth, words) {
var wordCount = 0;
var testLine = "";
var spacer = "";
var fittedWidth = 0;
var fittedText = "";
ctx.font = font;
for (var i = 0; i < words.length; i++) {
testLine += spacer + words[i];
spacer = " ";
var width = ctx.measureText(testLine).width;
if (width > maxWidth) {
return ({
count: i,
width: fittedWidth,
text: fittedText
});
}
fittedWidth = width;
fittedText = testLine;
}
}

Answer 2

yes this can be achieved through these links
link1 and link2.
and then set the div's by giving postioning :) cheers.
give border radius and get your shape. and use some margins to get it accurate. The link i have posted will help you.