0

给定一个相当短的H1-styled 文本字符串，我想text alignment根据文本是否跨越单行来有条件地设置属性。

如果字符串只占一行，我想将属性设置为center.

否则（给定字符串，它不应该超过两行），我希望第一行左对齐；第二个，对。为了强制字符串在我想要的位置换行，除了一个空格外，我对所有空格都使用了不间断空格——这意味着我可以.split(' ')用来定位不同的子字符串。

我已经在这个项目中使用了 jQuery 1.9.1，所以这是除了 CSS 之外的可用解决方案。

4

2 回答 2

0

首先h1 { text-align: center; }在您的css中设置，然后您可以测试宽度h1是否大于某个值，然后根据该值编辑css：

$('h1').each(function(){
    var width = $(this).css('width').replace(/(?:[.](?=.*[.])|[^\d.])+/g, "");
    if (width > yourValue) {
        $('h1').css('text-align', 'left')
    }
});

我不知道如何制作第二行text-align: right;，对不起:(

于 2013-03-22T19:53:20.883 回答
0

您可以尝试计算高度并运行 if 语句...

var oneLineOfText = $('h1').height(),
    theH1 = $('h1')
    numOfChars = 20; //find out how many chars fit on one line

if ( oneLineOfText <= theH1.height() )
   {
        theH1.css('text-align', 'center');
   }
else
   {
        var line1 = theH1.html().substring(0,numOfChars),
            line2 = theH1.html().substring(numOfChars);
        line1.css('text-align','left');
        line2.css('text-align', 'right');
   }

未经测试，但我认为这应该让你接近......

于 2013-03-22T20:00:36.003 回答