文本在圆的边界内换行，文本垂直和水平居中
我们喜欢圆圈！我需要帮助将文本放在一个圆内，并让文本行在圆圈的边缘换行。
我在这里有两个不同的、不充分的尝试：http://chrislaursen.com/papertwin/band/
第一个使用jquery插件TextMorph：http://nicodmf.github.com/TextMorph/en.html。这会很好地将文本包裹在圆圈内，但我不知道如何将它垂直居中。
我页面上的第二个圆圈只是简单地使用填充来将文本保留在圆圈内。这是一个简单的css解决方案，它不会将文本放在所需的圆形中。
我认为解决方案包括修改第一个圆圈中使用的插件，使文本垂直居中，但我不知道怎么做。任何帮助都将不胜感激！
回答 3
Stack Overflow用户
发布于 2012-11-16 07:27:56
其他的解决方案不是通用的，所以我想我应该尝试制作一个更具算法意义的解决方案。如果查看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();看一看Fiddle of all this。
Stack Overflow用户
发布于 2012-11-16 06:03:55
这是远非最好的解决方案，它更多的是一个快速修复，但它是有效的(参见here)。
$(function() {
var pad = new Array(75).join(" ");
$('#circle').prepend(pad);
var circle = new TextMorph(document.getElementById('circle'), {
width: 500,
height: 500,
lineHeight: 15
});
});这个想法是用一个空格的前缀来填充文本，这样它就会被“下推”。
Stack Overflow用户
发布于 2012-11-16 06:28:23
我所做的是用"p“标记将"div”中的文本环绕起来。然后我尝试了一些当文本在块元素中时如何在div中垂直对齐的6 methods (比如"p“标签)。
我试过其中的一些--你可以选择最适合你需要的。您可能需要一些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%;
">Brooklyn’s synth group Papertwin (Max Decker, Francis Cardinale, Nick Shopa, Justin Micheal Miller) was founded in 2009. Its debut EP “Porcelain,” released in 2011, offers a dark, reverent vision of new wave, embracing its high energy while drifting into a territory of dreams and half-light. The quartet is set to release its second EP, “Peru,” this spring.</p></div>注意应用于"p“元素的css。
https://stackoverflow.com/questions/13406662
复制相似问题
腾讯云开发者
