Hide text node in element, but not children

I'm having a little trouble with CSS and can't seem to find a solution. I have this HTML

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

Now I want to hide the text «Click to close» only, without hiding neither the div, nor the link within it.

Can this be done?

The visibility attribute can be overriden on children elements, so you are able to do this:

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

CSS:

#closelink {
    visibility:collapse;
}

#closelink a{
    visibility:visible;
}

And the result is this: http://jsfiddle.net/pavloschris/Vva84/

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

Try

<div id="closelink">
   <a href="">Close</a>
   Click to close
</div>


#closelink {
    position: relative;
    left: -9999px;
}

#closelink a {
    position: relative;
    left: 9999px;
}

mamath

It works but you can use visibility:hidden instead of visibility:collapse

To avoid the child element breaking to a new line (as happens with just using visibility: hidden/collapse; and visibility: visible), and to avoid drawing a 9999px block in the browser (generally frowned upon as it is unnecessary overhead), try this:

<div id="closelink">
    <a href="">Close</a>
    Click to close
</div>


#closelink {
    position: relative;
    visibility: hidden;
}

#closelink a {
    position: absolute;
    left: 0;
    top: 0;
    visibility: visible;
}

You can adjust your left: 0 value to provide some padding.

There are three methods I could think of:

One

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{
            opacity: 1;
        }
        .child{
            opacity: 0;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

Two

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{

        }
        .child{
            visibility: hidden;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

Three

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{

        }
        .child{
            display: none;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

Opacity is best if you want the image to always be on the page to keep the structure but, you don't want it to be visible. Hope this was helpful.

来源：https://stackoverflow.com/questions/15196630/hide-text-node-in-element-but-not-children

标签

css

textnode