文本行在圆的边界内断开，文本在垂直方向上和水平居中

Question

我们爱圈子！我需要帮助才能将文本放在圆圈内，并让文字线条包裹在圆圈的边缘。

我在这里有两个不同的，不充分的尝试：http://chrislaursen.com/papertwin/band/

第一个使用jquery插件TextMorph：http://nicodmf.github.com/TextMorph/en.html。这将文本很好地包装在圆圈内，但我不知道如何垂直居中。

我页面上的第二个圆圈只是使用填充来保持文本在圆圈内。这是一个简单的css解决方案，它不会将文本放在所需的圆形状中。

我认为解决方案涉及修改第一个圆圈中使用的插件以垂直居中文本，但我不知道该怎么做。任何帮助将不胜感激！

Answer 1

其他解决方案并非一般化，所以我认为我会采取更多算法解决方案。如果您查看TextMorph的代码，您会看到.content元素（包含文本）的margin-top属性设置为{{1}的负数（这些是初始化TextMorph对象时设置的内容）。 total-height - lineheight会使您的文字通常显示在您的圆圈（或其他形状）下方，因此它会“备份”到位。我们需要做的就是让文本精彩地居中，就是“备份它”，使它居中。

以下代码首先将<div>的{​​{1}}设置为圆的高度的1/2。这使文本显示在圆圈的下半部分。然后，它会逐步调整.content的{​​{1}}，直到接近为中心（请参阅代码中的注释）。考虑到文本的高度（以像素为单位）可能会发生变化，具体取决于字体，字体大小，浏览器渲染等。

段：

margin-top

查看Fiddle of all this。

Answer 2

这是远最佳解决方案，它更像是一个快速解决方案，但它有效（请参阅here）。

$(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 methods如何在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。