How to hide a specific text inside a element using css?

Question

I have a theme about rentals. The search engine is listing the cities, but when im adding a city, the name and the slug must be same. But for a better SEO, I need to add a prefix like "Detroit-cheap-rentals"

So I must write the city name and the city slug same. In this situation the search engine is looking like "Detroit Cheap Rentals"

I want to get rid of the "Cheap rentals" part with the css so the slug can still be detroit-cheap-rentals.

How can I do this with css?

In this picture, the part I want to delete with css is "Kiralık Villa" check the picture here please

Answer 1

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

if you want to hide with "save" the place use visibility: hidden; if not use 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>

To your comment hide part of text:

Set width and 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

I don't think this is possible with pure css, css has first-line, and first-letter selectors, but it is not possible unless you are able to modify the html.. so you can add

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

css

.hidden {
  display:none;
}

Or the many other solutions that were already presented.. Another idea would be using js, here a good start.. http://www.dynamicsitesolutions.com/javascript/first-word-selector/?path2=/javascript/first-word-selector/

Answer 3

You can add a class to the li tag and hide it with display:none;

Example HTML:

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

Example CSS:

.hidden {
    display:none;
}

Answer 4

As I understand, you want to show only the content of the data-value in the visible text on each <li> item?

You could do it like this, which will hide the existing text, and show the content of the data-value instead.

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

Example of HTML:

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

Example of CSS:

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