Hide non-tagged content with only css

Question

I have come across the following problem: i wish to hide the "..." that are displayed within the .footer div after the link, as shown in the picture below.

Only caveat: I can only use CSS to do so.

Can anybody tell me how to achieve this please?

To be helped you should post your full html (into eventually a snippet) ,that shows the issue, not a useless image :) .... if it is only about text, then font-size should do — G-Cyrillus, Jan 12 '17 at 15:37
Possible duplicate of [Is there a CSS selector for text nodes?](http://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) — Serlite, Jan 12 '17 at 15:42

score 2 · Accepted Answer · answered Jan 12 '17 at 15:39

you can use visibility:hidden in div parent and visibility: visible in child a

div {
  visibility: hidden
}
div a {
  visibility: visible
}

<div class="footer">
  <a href="#">All courses</a>
  ...
</div>

other approach is font-size:0

div {
  font-size: 0
}
div a {
  font-size: initial
}

<div class="footer">
  <a href="#">All courses</a>
  ...
</div>

score 1 · Answer 2 · answered Jan 12 '17 at 15:42

From my comment about the use of font-size:

div {
  font-size: 0;
  border:solid;
}
div * {
  font-size: 1rem;
  margin:0.25em;
}

<div><a href="#">link to see</a> "text to hide "<a href="#">link to see</a>
  <p>some more text here</p>
   "Also some text to hide "
</div>

xfactor11 · Answer 3 · 2017-01-12T15:44:51.773

0

The only way I can think of hiding content within a div is using this although it will also hide everything else contained within the div. If this is not what you hope to achieve please elaborate more.

    .footer {
        visibility: hidden;
    }

    <div class="footer">
    "..."
    </div>

edited Jan 12 '17 at 15:44

answered Jan 12 '17 at 15:39

xfactor11

11
6

Is this what you were looking for? – xfactor11 Jan 12 '17 at 15:49

score 0 · Answer 4 · answered Jan 12 '17 at 15:43

0

.wraper p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 1.3em;
  }

<div class="wraper">
  <a href="#">All courses</a>
  <p>&nbsp;Lorem ipsum</p>
</div>

answered Jan 12 '17 at 15:43

Andrei Fedorov

3,689
2
13
25

Boris K · Answer 5 · 2017-01-12T15:41:45.533

-1

Use :not and a color property

.footer:not(a){
  color:rgba(0,0,0,0);
}

Edit: jsFiddle

edited Jan 12 '17 at 15:41

answered Jan 12 '17 at 15:38

Boris K

1,469
9
29

i do not think it will work, text to hide is not encapsulate in a tag .... – G-Cyrillus Jan 12 '17 at 15:39
You can use a color property. See my jsFiddle – Boris K Jan 12 '17 at 15:45

Hide non-tagged content with only css

5 Answers5