jquery - 调整宽度 <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>