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?

回答1:

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/

回答2:

.closelink {
  font-size: 0px;
}

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

回答3:

Try

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


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

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

回答4:

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

回答5:

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.

回答6:

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