How can I hide text content but not child elements?

user_11826311 0
Viewed 118

I am working with an html feed that gives me the following structure

<div class="a">
    <span class="b">Some Text</span>
    Some other, redundant text
</div>

I can't change the structure of the html feed, but I was wondering if there is a CSS solution that will hide the redundant text, so that it takes up zero space, while still keeping the <span> element visible.

css html javascript
2 Answers

div > span {
  visibility: visible; 
}

div {
  visibility: hidden;
}
<div class="a">
    <span class="b">Some Text</span>
    Some other, redundant text
</div>

user_43717670

A bit hacky but works

.a {
  font-size: 0px;
}
.a span {
  font-size: 1rem;
}

don't use visibility property, it makes the text invisible but does not remove it.

user_174393580
Related