调整宽度 <p> 以显示特定数量的行

Question

我正在尝试找到一种方法来调整某些特定段落元素的宽度，以便自动拥有两条具有相同宽度的行。

即使有更多的文字，也会调整宽度，因为有两条相等的行（最后一行不应比第一行宽）。

我尝试用 CSS 固定段落的宽度，但只有当我有相同的文本时它才能工作......

你知道是否有一个 jQuery 插件，或者我可以重复使用的现有代码？

Answer 1

这是我的看法。

对于换行符，我会在我的文本中添加一个<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>