css - 使用 line-clamp 和嵌套的 p 标签夹紧线-6ren

css - 使用 line-clamp 和嵌套的 p 标签夹紧线

转载作者：行者123 更新时间：2023-11-28 14:02:29

26

4

我正在尝试使用 -webkit-line-clamp 属性(如 https://css-tricks.com/almanac/properties/l/line-clamp/ 所示)，但它似乎不适用于嵌套标签。

我正在努力使这个示例有效:

<html>
  <body>
    <div style="width:200px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
    </div>
  </body>
</html>

我的内容是由 quill.js 生成的，由多个 p 标签包裹。我无法改变这一点。你知道我如何让 -webkit-line-clamp(或类似的东西)工作吗？

最佳答案

如果您将这两个段落放在另一个 div 中，您当前的代码将截断显示的文本。

这是一个工作示例:

.container {
  display: -webkit-box; 
  overflow: hidden;
  -webkit-line-clamp: 5; 
  -webkit-box-orient: vertical; 
  width:200px; 
}

<html>
  <body>
    <div class="container">
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
      </div>
      
    </div>
    
  </body>
</html>

这是一个使用 span 标签而不是段落标签的例子。这种方法允许“...”变得可见:

.container {
  display: -webkit-box; 
  overflow: hidden;
  -webkit-line-clamp: 5; 
  -webkit-box-orient: vertical; 
  width:200px; 
}

<html>
  <body>
    <div class="container">
      <div>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </span>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </span>
      </div>
      
    </div>
    
  </body>
</html>

关于css - 使用 line-clamp 和嵌套的 p 标签夹紧线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57546280/

26

4

0

文章推荐： swift - 尝试构建发送按钮时出错

文章推荐： javascript - 单选按钮在 Chrome 和 IE 中消失

文章推荐： javascript - 如何避免聊天室应用程序中的恶意发送

文章推荐： javascript - JavaScript 中的对象语法和 this

c - while(*p){p++;}、while (*++p){;} 和 while(*p++){;} 有什么区别？
关于strcat函数。 while (*p) p++; 和 while (*++p) ; 两者都有效，但是 while (*p++) ; 不起作用。我认为 first 和 th
What is "
" in HTML?(HTML中的““是什么
？)
下面例子中的第一行代码是什么。我看到一个YouTuber在写下面的代码，它显示了一个设计在csswar Challenges中。我也尝试了一下，它很管用。但我以前从未在任何HTML教程上看到过它，我在
html - 处理不间断空格 :

vs.

是不间断空格，表示没有换行的空白处。如果我用我在两个段落之间有一个空格(更大的间隔)。如果我使用我在两个段落之间只有一个新行(没有中断)。为什么？最佳答案在 HTML 中
字符* p = "hello"; printf ("%c %c %c %c", *p, *++p, *p++, *p);
这个问题已经有答案了: Why are these constructs using pre and post-increment undefined behavior? (14 个回答) 已关闭 9
c - "for ( ; *p;++p) *p = tolower(*p);"在 c 中如何工作？
我对编程还很陌生，只是想知道为什么这段代码: for ( ; *p; ++p) *p = tolower(*p); 当 p 指向一个字符串时，可以降低 c 中字符串的大小写吗？最佳答案一般来说，这
c - 为什么对于指针 *p，p[0] 是存储在 p 的地址而 p[1] 是 p 本身的地址？
代码 int n = 25; int *p = &n; printf("%x\n %d\n %x\n", p, p[0], p[1]); 返回: \ 当然我永远不会这样做，但在 K&R 中声明
python - 考虑到 p 在 python 中是素数，当我执行 p/p+1 + p+1/p 操作时出错
所以，我想创建一个简单的程序，返回有关连续素数的计算结果。首先，我创建一个包含所有这些素数的列表，然后尝试计算结果，但这给了我一个超出范围的索引。有人可以帮助我吗？我的程序: primes = []
c++ - C/C++ 中 p[i] 、 i[p] 和 *(p+i) 、 *(i+p) 的区别
这个问题在这里已经有了答案: With arrays, why is it the case that a[5] == 5[a]? (20 个答案) 关闭 9 年前。我想知道 C/C++ 中以下四
C++ - *p vs &p vs p
我仍在努力理解 *p、&p 和 p 之间的区别。根据我的理解，* 可以被认为是“指向的值”，而 & 可以被认为是“地址”。换句话说，* 保存值，而 & 保存地址。如果这是真的，那么 *p 和 p 之间
java - 需要更换
你是吗？ [xxxrecipientFirstNamexxx]
和
你是吗？ {recipientFirstName}

需要更换你是吗？ [xxxrecipientFirstNamexxx] 和你是吗？ {recipientFirstName} 。我尝试使用边界匹配器。但结果并不符合预期。我尝试使用下面的代码 "A
c# - query = query.OrderBy(p => p.IsTop).ThenOrderByDescending(p => p.JobId)?
我想按 IsTop 属性升序排序对象，然后按 JobId 属性降序排序: query = query.OrderBy(p => p.IsTop).ThenOrderByDescending(p =
java - Apache POI 数据格式化程序无法应用自定义格式 "0.0 p.p.;(0.0 p.p.)"
在我尝试使用 Apache POI 进行转换的 Excel 文件中，我有一个单元格的数值为 -3.97819466831428，自定义格式为“0.0 p.p.;(0.0 p.p.)”。因此，在 Exc
c# - 如何创建一个扩展方法，允许我调用 ToSerializableDictionary(p => p.ID) 而不是 .ToDictionary(p => p.ID)
我想创建一个扩展方法，允许我调用 ToSerializableDictionary(p => p.ID)而不是 .ToDictionary(p => p.ID)在以下 LINQ 上下文中。虽然我不确定
javascript - $ ("p").each(function (){}) vs for( p in $ ("p") 返回不同的段落数值
在下面的 HTML 代码上运行此 jQuery 代码会返回不同的结果，我认为它们应该返回相同的值。 jQuery 代码: var counter = 0; $("p").each(function()
c++ - 我在哪里可以找到标准中对 *p 和 p[0]、*(p+1) 和 p[1]、... 之间等价关系的引用？
在下面的代码片段中，符号 *p 等同于 p[0]，*(p + 1) 等同于p[1]，依此类推。 int* p = new int[3] { 1, 2, 3}; cout << *p << ' ' <<
c++ - Foo *p = 0;p->p() 如何有效？
这个问题在这里已经有了答案: What will happen when I call a member function on a NULL object pointer? [duplicate]
c - "p = p + (*p)++ * 3 + c;"会导致未定义的行为吗？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Undefined Behavior and Sequence Points 按照标准中的定义，E1 +=
What is "
" in HTML?(在HTML中“
”是什么？)
以下示例中的第一行代码是什么。我看到一个youtube用户写下面的代码，它显示在cssbattle挑战的设计。我也试过，它的作品。但我从来没有见过它在任何HTML教程之前，我在谷歌上搜索它，但它只显示
php - < o : p > & nbsp ; display error
每当我收到来自 MS outlook 的电子邮件时，我都会收到此标记 & nbsp ; (没有空格)哪个显示为？在 <>. 当我将其更改为 ISO-8859-1 时，浏览器页面字符集编码为 UTF-8
python - 获取标签之间的字符串(
p1
TEST
p2
中的 TEST)
代码: from bs4 import BeautifulSoup soup = BeautifulSoup('p1TESTp2') print soup.div() 结果: [p1, p2] 为什么

首页

博学

6Ren·AI

商城

css - 使用 line-clamp 和嵌套的 p 标签夹紧线