如何在同一<p>标签内隐藏指定部分文本内容？

方法1：修改HTML结构配合CSS（最简单直接） #

先给需要隐藏的第二部分文本包裹一个标签，比如<span>：

<p class="text-content">
"First part of text"
<span id="divider"></span>
<span class="second-text">"Second part of text"</span>
</p>

然后添加CSS样式隐藏这个标签：

.second-text {
  display: none;
}

方法2：不修改HTML，用JavaScript处理 #

如果无法改动原HTML，可以通过JavaScript定位到#divider之后的文本节点，将其移除或隐藏：

// 获取divider元素
const divider = document.getElementById('divider');
// 获取它的下一个兄弟节点（就是第二部分文本）
const secondTextNode = divider.nextSibling;
// 移除该文本节点
if (secondTextNode) {
  secondTextNode.remove();
}

或者如果只是想隐藏而不是移除，可以把文本节点替换成空字符串：

const divider = document.getElementById('divider');
const secondTextNode = divider.nextSibling;
if (secondTextNode && secondTextNode.nodeType === Node.TEXT_NODE) {
  secondTextNode.textContent = '';
}

方法3：CSS间接隐藏（局限性较大） #

如果不想用JS，也可以通过给父元素设置overflow: hidden并调整高度，但这种方法依赖文本的排版，不够灵活，示例：

.text-content {
  overflow: hidden;
  height: 1.2em; /* 调整高度只显示第一行文本 */
}

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