對齊文本形格

Question

我可以對齊一個div文本以幾何形狀排列，這樣 https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ5z8OYxnypDr09mmfFMunJj31x_XtfG3MFj0vlAa_ceoCnts0OfQ

沒有隱藏一些文字？

更新：

我需要的是這樣的，上面是一個圓，也是我需要像這樣的平行四邊形：

http://i39.tinypic.com/4r2ikm.jpg

Answer 1

這裏有一個JS代碼小提琴

fiddle

發現它的一些地方。

這裏的腳本

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

是的，這可以通過這些鏈接可以實現

link1和link2。

然後設置div的給予postioning :)歡呼聲。

給予邊界半徑，並得到你的形狀。並使用一些利潤來使其準確。我發佈的鏈接將幫助你。