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

Question

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

我不会编码，所以我尝试过的唯一解决方案是更改与滑块相关的数字，我认为它被标记为 CSS 样式中的 'Hero Slider' sheet style.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;
}

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

What code to I need to add to cut off text after 3 lines and add ellipses in Wordpress website?

php

html

css

wordpress

elementor