我需要添加什么代码才能在 3 行后截断文本并在 Wordpress 网站中添加省略号?

Question

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

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

Answer 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>

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

Answer 2

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

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