如何使用css隐藏<li> </ li>元素中的特定文本？

Question

我有一个关于租赁的主题.搜索引擎列出了城市,但是当我添加城市时,名称和slug必须相同.但为了更好的搜索引擎优化,我需要添加一个前缀,如"底特律 - 廉价租赁"

所以我必须写出同名的城市名称和城市slu .. 在这种情况下,搜索引擎看起来像"底特律廉价租赁"

我想摆脱css的"廉价租赁"部分所以slu can仍然可以是底特律便宜的租金.

我怎么能用css做到这一点？

在这张图片中,我想用css删除的部分是"KiralıkVilla", 请在这里查看图片

Answer 1

使用 li[data-value="Kiral?k Villa"]

如果你想隐藏"保存"这个地方使用,visibility: hidden;如果不使用display:none

在这里学习visibility:hidden和之间的区别display:none:

li[data-value="Kiral?k Villa"]{
    visibility: hidden;
}

<ul>
<li data-value="Kiral?k Villa">Kiral?k Villa</li>
<li data-value="other">other</li>
</ul>

对你的评论隐藏部分文字:

设置width和 white-space: nowrap; overflow: hidden;

   li[data-value="Kiral?k Villa"]{
    width: 83px;
    white-space: nowrap;
    overflow: hidden;
    }

<ul>
 <li data-value="Kiral?k Villa">Kiral?k Villa and more text</li>
 <li data-value="other">other</li>
</ul>