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

Question

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

即使文字多了，也会调整宽度，让两行相等（最新的一行不要比第一行宽）。

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

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

Answer 1

这是我的看法。

对于换行符，我会在文本中添加 <br>。

我要添加的位置 <br> 将是 n/2 之后的第一个 space。因此第二行总是比第一行短。

以下是一个粗略的示例，您可能需要进一步完善。

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>

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

Adjust width <p> for having a specific number of lines on display

css

jquery

width

paragraph