我需要添加啥代码来截断 3 行之后的文本并在 Wordpress 网站中添加省略号？

Posted 2023-03-05

【中文标题】我需要添加啥代码来截断 3 行之后的文本并在 Wordpress 网站中添加省略号？

【英文标题】：What code to I need to add to cut off text after 3 lines and add ellipses in Wordpress website?我需要添加什么代码来截断 3 行之后的文本并在 Wordpress 网站中添加省略号？

【发布时间】：2019-12-14 18:02:49

【问题描述】：

我在使用 Elementor 和名为 NeoTech 的付费主题构建的 Wordpress 网站 (buenavistamag.com) 上遇到问题。在首页的滑动缩略图轮播中，长文章标题不断使轮播在移动设备上变得非常大，这导致轮播干扰了大标题文本。是否可以在 3 行之后切断轮播中的标题（不是大标题，只有轮播中的缩略图标题）并在末尾添加和省略号？如果可能的话，你能不能只在一个空格之后把它切断，这样单词就不会在单词中间被切断？最后，这会解决我的问题，即轮播干扰了特色文章的主标题吗？如果您对我在说什么感到困惑，请告诉我，以便我澄清。我尝试附加图片，但没有地方托管它们并创建指向它们的链接。

我不会编码，所以我尝试过的唯一解决方案是更改与滑块相关的数字，我相信它在 CSS 样式表 style.css 中被标记为“英雄滑块”。我没有运气。有人有解决办法吗？

【参考方案1】：

使用-webkit-line-clamp

.line-clamp 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

<div class="line-clamp">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>

注意：这仅适用于现代浏览器

【讨论】：

对于其他浏览器是否还有其他供应商前缀的-webkit-line-clamp 版本？

没有。它将仅支持最新浏览：

@Vikas Jadhav 我把这段代码放在哪里？另外，这会影响我网站上的所有文本还是只影响滑动轮播中的文本？

@shaansridhar 将此代码放入您的 css 文件中，这只会影响具有类 .line-clamp 的元素

【参考方案2】：

将此添加到您的主题 css 文件中

    .hero__slide-thumb-text-holder div h2 a 
   display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

【讨论】：

您的 CSS 工作正常，但它缩短了错误的标题（请参阅 buenavistamag.com）。您能否更改代码，使其缩短滑动轮播中的文本而不是大标题？

没关系，我修好了！我试图缩短 .carousel-thumbs__title 而不是 .hero__slide-thumb-text-holder。我把你的 css 添加到 .carousel-thumbs__title 文本格式中，现在可以使用了。谢谢！