个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 14:02:29 26 4
gpt4 key购买 nike

我正在尝试使用 -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