多行文本截断

Question

有没有人知道一种干净利落的方法，可以把一段文字截断成两行。这就是我要截断的内容(p元素)：

<blockquote><p>&#8220;<?=$test_entry ?>&#8221;</p></blockquote><cite><?=$test_name ?></cite>

我尝试了各种解决方案，包括clamp.js (在提供的示例中它甚至不能正常工作)我尝试了使用文本溢出的CSS3解决方案，但这些解决方案只截断到一行。所有其他javascript示例都使用字符串长度，如果文本大小改变，如果特殊字符被编码，以及在许多其他条件下，字符串长度就会中断。

如果有必要，我很乐意更改标记，我只是希望能够截断文本以适合div框中的两行，并以省略号(...)结束。我本以为这会很简单，但显然不是这样。

谁能给我指出一个现有的解决方案，或者给我一个从哪里开始的线索。任何帮助都非常感谢。

Answer 1

在这里，您可以在this SO question中找到一个基于jQuery的现有解决方案，它应该可以跨浏览器工作。

Answer 2

这是截断多行段落的一个非常简单的解决方案，它还将在最后一行的末尾添加省略号。

​

p.truncate_text {
    color:red;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

<p class="truncate_text">This paragraph will truncate into 3 lines Quisque ut purus nunc. Aenean vitae lectus maximus, fermentum justo quis, lobortis neque. Curabitur lacinia in massa in efficitur. Praesent et dolor et ex sodales volutpat vel lobortis ligula. Maecenas convallis luctus tempus. Vivamus non libero nisi. Donec facilisis, odio sed dictum consectetur, eros dolor pellentesque quam, ut ornare est ligula eu ligula. Etiam elementum nibh lectus, quis sodales massa malesuada vitae. Etiam finibus quam eget condimentum rutrum. Donec et velit ipsum. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

​

​

Answer 3

使用textarea元素来限制文本行！

<textarea rows="2" readonly disabled>Try enameling the ricotta broccolis with aged champaign and rum, warmed. </textarea>

然后，您可以使用伪元素:after添加省略号或“Read more”。

不要忘记属性'readonly‘和'disabled’。Readonly防止用户与文本区域交互。禁用可防止页面中的任何表单提交值。