Как условно выровнять веб-текст?

Question

Учитывая довольно короткую строку H1 -styled text, я бы хотел условно установить свойство text alignment на основе того, распространяется ли текст за пределы одной строки.

Если строка занимает только одну строку, я хочу установить ее значение center.

В противном случае (учитывая строку, она не должна занимать больше двух строк), я бы хотел, чтобы первая строка выровнялась влево; второй, правый. Чтобы заставить строку обернуть туда, где я хочу, я использовал неразрывные пробелы для всех, кроме одного, что означает, что я могу использовать .split(' ') для таргетинга на различные подстроки.

Я уже использую jQuery 1.9.1 в этом проекте, так что это доступно в дополнение к CSS.

Answer 1

Сначала установите 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;, жаль :(

Answer 2

Вы можете попробовать вычисление высоты и работаете, если заявление ...

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'); 
    } 

Не проверено, но я думаю, что это должно вас близко ...