如何在跨度内使用 CSS 隐藏部分文本？ [复制]答案

【问题标题】：How to HIDE part of text with CSS inside span? [duplicate]如何在跨度内使用 CSS 隐藏部分文本？ [复制]
【发布时间】：2020-07-30 21:44:59
【问题描述】：

如何仅使用 CSS 隐藏库存文本？提前祝愿..

&lt;span class="option__title option__title testdhana"&gt;In stock | &lt;span class="woocommerce-Price-amount amount"&gt;&lt;span class="woocommerce-Price-currencySymbol"&gt;$&lt;/span&gt;12.00&lt;/span&gt; | CHICKEN BIRYANI&lt;/span&gt;

【问题讨论】：

testdhana 的所有内容都可能只有文本“In Stock”而不更改代码。
你需要 JS。或者改html...
如果我在搜索输入中键入任何内容，则此数据会加载到搜索结果中。因此，当我在输入中键入 3 个文本时，jquery 响应不佳。
最佳实践是将要定位的最原子文本包装在其自己的元素中。否则如前所述，您确实需要为此使用 JS 以避免黑客攻击。
@TylerH 对于这种情况，没有一个重复项给出答案 :) 跨度内有两个文本节点，如果它只有一个文本节点，那么我们可以应用这个重复项：stackoverflow.com/q/15196630/8620333跨度>

标签： css

【解决方案1】：

使用负文本缩进并隐藏溢出

.option__title {
  display:block;
  overflow:hidden;
  text-indent:-60px; /* adjust this */
}

&lt;span class="option__title option__title testdhana"&gt;In stock | &lt;span class="woocommerce-Price-amount amount"&gt;&lt;span class="woocommerce-Price-currencySymbol"&gt;$&lt;/span&gt;12.00&lt;/span&gt; | CHICKEN BIRYANI&lt;/span&gt;

【讨论】：

非常感谢。它工作正常。我正在与这最后 3 小时战斗。
@Tamilheartz 如果它解决了您的问题，请不要忘记接受答案

【解决方案2】：

.d-none{
  display: none;
}

&lt;span class="option__title option__title testdhana"&gt;&lt;span class="d-none"&gt;In stock&lt;/span&gt; | &lt;span class="woocommerce-Price-amount amount"&gt;&lt;span class="woocommerce-Price-currencySymbol"&gt;$&lt;/span&gt;12.00&lt;/span&gt; | CHICKEN BIRYANI&lt;/span&gt;

如果需要，您也可以隐藏|，只需将其包裹在span 中即可。

【讨论】：

你改代码，没有是不可能的。
感谢您的回复。我不能在“有货”中添加任何类或跨度。它的第三方 js 检索数据。请任何其他解决方案。
在这种情况下，如果您有权更改，请尝试使用 JavaScript，否则在第三方 js 中是不可能的。