Question

我有一个关于租金的主题。搜索引擎正在列出城市，但是当我添加城市时，名称和子弹头必须相同。但是为了获得更好的SEO，我需要添加诸如“底特律便宜租车”之类的前缀

因此，我必须将城市名和城市子弹写成相同的名称。在这种情况下，搜索引擎看起来就像“底特律的廉价租车”

我想摆脱CSS的“廉价租车”部分，这样子弹仍然可以成为底特律便宜的租车。

如何使用CSS做到这一点？

在这张照片中，我要使用CSS删除的部分是“KiralıkVilla” check the picture here please

Answer 1

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

如果要“保存”隐藏该地方，请使用visibility: hidden;；如果不使用display:none

Learn here the difference between visibility:hidden and 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>

Answer 2

我认为纯css不可能做到这一点，css具有first-line和first-letter选择器，但是除非您能够修改html，否则这是不可能的。这样您就可以添加

<li>Detroit <span class="hidden">Cheap Rentals</span></li>

css

.hidden {
  display:none;
}

或者已经提出的许多其他解决方案。另一个想法是使用js，这是一个好的开始。.http://www.dynamicsitesolutions.com/javascript/first-word-selector/?path2=/javascript/first-word-selector/

Answer 3

您可以将一个类添加到li标记中，并使用display：none;

隐藏它

示例HTML：

<ul>
    <li>Number 1</li>
    <li class="hidden">Number 2</li>
    <li>Number 3</li>
</ul>

示例CSS：

.hidden {
    display:none;
}

Answer 4

据我了解，您只想在每个data-value项目的可见文本中显示<li>的内容？

您可以这样做，这将隐藏现有文本，并显示data-value的内容。

li{
visibility:hidden;
display:block;
max-width: 100px; /* this should be the available width you have in the dropdown box */
overflow-x:hidden;
}
li:before{
visibility:visible;
display:inline-block;
content:attr(data-value);
}

<ul>
<li data-value="Detroit">Detroit something</li>
<li data-value="Fethiye">Fethiye Kiralık Villa</li>
</ul>

Answer 5

HTML示例：

<li>Detroit <br>Cheap Rentals</li>

CSS示例：

li {
    height: 20px;
    overflow: hidden;
}

如何使用CSS在<li> </li>元素内隐藏特定文本？

5 个答案: