Вертикальный центрирующий текст (jQuery)

Question

<div style="width: 100px; height:50px; line-height:50px; overflow:hidden;">
    <p>A short line</p>
</div>

<div style="width: 100px; height:50px; line-height:50px; overflow:hidden;">
    <p>A really really really long line</p>
</div>

Обернутый текст во втором примере обрезается из-за высоты строки: 50px, которая в этом случае должна быть 25px.Как мне использовать jQuery, чтобы найти, есть ли в элементе однострочный или многострочный текст?

Спасибо!

Answer 1

Возможно, вы могли бы установить высоту div в auto, захватить его высоту и сохранить в переменной, установить его высоту обратно в 50px, а затем проверить переменную, чтобы увидеть, была ли высота элемента более 50px. Если это так, то вы можете запустить функцию для соответствующей настройки высоты линии. Вы можете просто взять переменную и разделить ее на 50, чтобы получить приблизительное количество строк (то есть, если высота = 150 пикселей, вы можете предположить, что есть 3 строки текста), тогда вы можете установить высоту строки соответственно.

Не уверен, что это будет работать, но что-то вроде этого, если вы используете jQuery:

$('div').css('height', 'auto');

var divHeight = $('div').height();

$('div').css('height', '50px');

if (divHeight > 50) {
    var lineHeight = (divHeight / 50) + 'px';

    $('div').css('line-height', lineHeight);
}

Answer 2

Многострочный текст появляется, когда ширина текста больше ширины документа

В предыдущем вопросе SO я нашел решение для определения ширины текста . Теперь все, что вам нужно сделать, это сравнить ширину текста с шириной div (в нашем случае это 100px). Если оно больше, оно будет многострочным. Запомните, чтобы включить любые отступы могут добавить позже в ваш DIV.

Просто для справки, вот код, на который я ссылаюсь (хотя он не мой)

$.fn.textWidth = function(){
  var sensor = $('<div />').css({margin: 0, padding: 0});
  $(this).append(sensor);
  var width = sensor.width();
  sensor.remove();
  return width;
};

Надеюсь, это поможет!