文本行在圓的邊界內中斷，文本垂直和水平居中

Question

我們愛圈子！ 我需要幫助將文本放入圓內並使文本線環繞在圓的邊緣。

我在這里進行了兩種不同的嘗試，但嘗試不足： http : //chrislaursen.com/papertwin/band/

第一個利用jquery插件TextMorph： http ://nicodmf.github.com/TextMorph/en.html。 這樣可以將文本很好地包裹在圓圈中，但是我不知道如何垂直居中。

我頁面上的第二個圓圈僅使用填充將文本保留在圓圈內。 這是一個簡單的css解決方案，不會將文本放置為所需的圓形。

我認為解決方案涉及修改第一個圓圈中使用的插件以使文本垂直居中，但我不知道該怎么做。 任何幫助將不勝感激！

Answer 1

其他解決方案沒有被概括，因此我認為我會努力提出一種更具算法性的解決方案。 如果查看TextMorph的代碼，則會看到.content元素（包含文本）的margin-top屬性設置為total-height - lineheight （這兩種情況都是在您初始化TextMorph對象）。 具有文本的<div>通常會顯示在圓（或其他形狀）下方，因此正在“備份”到適當位置。 要使文本居中對齊，我們所需要做的就是“備份”文本，使其居中。

下面的代碼從將.content的margin-top設置為圓的高度的1/2開始。 這使文本顯示在圓圈的下半部分。 然后，它逐步調整.content的頁margin-top ，直到其幾乎居中（請參見代碼中的注釋）。 考慮到文本的高度（以像素為單位）可能會有所變化，具體取決於字體，字體大小，瀏覽器渲染等。

片段：

$('.content').css('text-align', 'justify');
topMargin = 0 - $('#circle').height() / 2;
$('.content').css('margin-top', topMargin + 'px');

make_vertical_center = function() {
    var heightAbove, offset;

    topMargin -= lineHeight / 4; // more precision, but also more increments as this approaches 1

    $('.content').css('margin-top', topMargin + 'px');

    heightAbove = Math.abs(($('#circle').height() - $('.content').height()) / 2);
    offset = Math.abs($('#circle').offset().top - $('.content').offset().top);

    if (offset - heightAbove > 0) {
        make_vertical_center();
    }
};

make_vertical_center();

看看這一切的小提琴 。

Answer 2

這遠非最佳解決方案，它可以快速解決，但可以正常工作（請參閱此處 ）。

$(function() {
    var pad = new Array(75).join(" ");
    $('#circle').prepend(pad);

    var circle = new TextMorph(document.getElementById('circle'), {
        width: 500,
        height: 500,
        lineHeight: 15
    });
});

想法是用空格前綴填充文本，以使其被``按下''。

Answer 3

我所做的就是用“ p”標記將“ div”中的文本換行。 然后，我嘗試了這6種方法來在div元素位於塊元素中時（例如“ p”標簽）如何垂直對齊div。

我已經嘗試了其中一些-您可以選擇最適合您的需求的一種。 您可能需要進行一些CSS調整（稍微更改樣式），但是這里重要的是如何使事情正常工作的想法。

這是我所做的：

<div style="margin-top: -499px;" class="content"><p style="
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 30%;
    margin: auto;
    margin-top: 20%;
">Bro­ok­lyn’s syn­th gro­up Pa­per­twin (Max Dec­ker, Fran­cis Car­di­nale, Nic­k Sho­pa, Jus­tin Mic­he­al Mil­ler) was fo­un­ded in 2009. It­s de­but EP “Por­ce­la­in,” re­le­a­sed in 2011, of­fer­s a dar­k, re­veren­t vi­si­on of new wa­ve, em­bra­cin­g it­s hig­h e­ner­gy whi­le drif­tin­g in­to a ter­ri­tory of dre­am­s an­d hal­f-lig­ht. The qu­ar­tet is set to re­le­a­se it­s se­con­d EP, “Pe­ru,” this sprin­g.</p></div>

注意應用於“ p”元素的css。