如何有条件地对齐网页文字？

给定一个相当短的字符串H1风格的文本，我想有条件地设置text alignment属性根据文本是否跨越一行。如何有条件地对齐网页文字？

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

否则（给定字符串，它不应该占用两行以上），我希望第一行对齐左边;第二，正确。为了强制字符串缠绕在我想要的位置，我对所有空间都使用了非空格 - 这意味着我可以使用.split(' ')来定位不同的子字符串。

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

2013-03-22 ele

首先在你的CSS设置h1 { text-align: center; }，那么你就可以测试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-22 19:53:20 dezman

你可以尝试计算高度和运行的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-22 20:00:36

我喜欢你的检查元素高度，但我无法分割字符串︰var lines = $（'h1'）。text（）。分裂（' '）; （'text-align'，'left'），lines [1] .css（'text-align'，'right'）;'不会让我到任何地方。 – ele 2013-03-22 21:36:55

我不认为我会使用拆分，除非你知道你想要分割线的确切字符。上面列出的子字符串会将行分割成一定数量。所以我要做的是找出可以安全放在一行上的字符数并将其分配给numOfChars。然后运行该检查并相应地将其分开。也许你可以用一个类来包装每一行，这样javascript就不会分配CSS。 – 2013-03-24 14:53:26

我知道确切的字符：字符串中只有一个中断空格（''）。其余的都没有空格（' '）。 – ele 2013-03-25 15:06:08

如何有条件地对齐网页文字？

回答

相关问题