Отрегулируйте ширину <p>для отображения определенного количества строк - PullRequest
Новая
       24

Отрегулируйте ширину <p>для отображения определенного количества строк

0 голосов
/ 22 июня 2019

Я пытаюсь найти способ настроить ширину некоторых определенных элементов абзаца, чтобы автоматически иметь две строки одинаковой ширины.

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

Я попытался зафиксировать ширину абзаца с помощью CSS, но это могло бы работать, только если у меня такая жетекст ...

Знаете ли вы, есть ли для этого плагин jQuery или существующий код, который я мог бы использовать повторно?

having same width paragraph, calculated with text

1 Ответ

1 голос
/ 22 июня 2019

Вот мой дубль.

Для разрыва строки я бы добавил <br> к своему тексту.

Позиция, которую я бы добавил <br>, будет первым пробелом после n / 2.Таким образом, вторая строка всегда будет короче первой.

Ниже приведен грубый пример, который, возможно, потребуется уточнить далее.

var textElement = $('p');

textElement.each(function(){
  var text = $(this).text();
  var length = text.length;
  

  for(var i =(Math.ceil(length/2)); i<length; i++){
     if(text[i]===' '){
        var text2 = text.slice(0, i) + "<br>" + text.slice(i);
        $(this).html(text2);
        break;
     } 
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lectus ac 
</p>


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lectus ac elit vestibulum ultricies eget sit amet lacus. Lorem ipsum dolor sit amet.
</p>
...