如何为指定CSS类实现文本两行后显示省略号并隐藏指定内容？

嘿，我来帮你搞定这个需求！针对你的contentTitle___1tY09类，咱们分两步调整就能实现目标：

1. 添加两行文本截断与省略号 #

要让文本只显示两行并在末尾加省略号，你需要在现有CSS基础上补充这些属性：

.contentTitle___1tY09 {
  margin: 0 0 0 1.2rem;
  font-size: 1.1rem;
  line-height: 1.2rem;
  display: inline-block;
  width: 100%;
  color: #484848;
  text-transform: capitalize;
  /* 新增两行截断核心属性 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

简单说下新增属性的作用：

• overflow: hidden：把超出容器的文本藏起来
• text-overflow: ellipsis：在文本截断的位置显示省略号
• display: -webkit-box + -webkit-line-clamp: 2：强制文本只展示2行
• -webkit-box-orient: vertical：配合前两个属性，让文本按垂直方向排列

注：这套属性依赖webkit内核，目前Chrome、Safari、Edge等主流浏览器都支持；如果需要兼容Firefox，可能得搭配JS辅助实现，但大部分场景下这个CSS方案足够用了。

2. 隐藏"University of Hong Kong"内容 #

单纯靠CSS很难精准隐藏一段特定文本，这里给你两种实用方案：

方案A：拆分HTML结构（推荐） #

如果能修改HTML，把"University of Hong Kong"放在单独的<span>里，直接用CSS隐藏：

<div class="contentTitle___1tY09">
  你的标题主体内容
  <span class="hidden-university">University of Hong Kong</span>
</div>

然后补充CSS：

.hidden-university {
  display: none;
}

方案B：用JS替换文本 #

如果没法改HTML，就用JS遍历目标元素，把指定文本替换为空：

document.querySelectorAll('.contentTitle___1tY09').forEach(el => {
  el.textContent = el.textContent.replace('University of Hong Kong', '');
});

这样既能确保这段文本不显示，也不会影响之前设置的两行截断效果。

把这两部分结合起来，就能完美达成你的需求啦！

内容的提问来源于stack exchange，提问作者h3110