如何使用 CSS 伪元素限制字符？答案

【问题标题】：How to limit characters using CSS pseudo element?如何使用 CSS 伪元素限制字符？
【发布时间】：2014-12-11 15:56:32
【问题描述】：

我正在使用 JS 和 CSS 伪元素将类应用于 div 的第一行，然后只显示第一行并隐藏该 div 内的其他内容。

我正在使用它来限制 tumblr 主题的索引页面上的 div 内显示的内容量，因为每个帖子都被限制在一个我不想超过高度的方形框内。

理想情况下，我想选择正确数量的字符来显示，而不仅仅是第一行。我想知道是否有人可以提出这样做的方法？任何建议或帮助将不胜感激。

HTML

<div class="text-p-pad text-body">
    {Body}
</div>

CSS

.text-body p :not(.index-hide)  {
    display: none;
}

$( ".text-body p::first-line" ).addClass( $( "index-hide" ) );

【问题讨论】：

你不能用text-overflow: ellipsis - developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
:not() 是伪类，而不是伪元素。
好吧，我两个都用，不是吗？
我不知道省略号，我会调查一下，谢谢。
font-family 使用了什么？ width , height 要求 first-line ?

【解决方案1】：

在 div 上设置高度并使用 CSS 溢出：

.text-body {
    height: 40px; // or whatever height
    overflow-y: hidden;
}

【讨论】：