CODEWITHSUNDEEP
htmlcss
ggzone
ggzone

Reputation: 3711

Keep Text width and height but "hide" it

Someone knows how to hide a text on a background(with gradients) but keep its height and width? visibility:hidden on my span-Tag seems not to work. it should keep an inline element by the way.

edit:

<div><span>whatever</span><img src="whatever.jpg"/></div>

Upvotes: 5

Views: 4698

Answers (2)

Ross Smith
Ross Smith

Reputation: 755

Use inline-block.

http://caniuse.com/#search=inline-block

HTML:

<div>
    <span>Foo bar boo baz</span>
</div>

CSS:

div
{
    background: red;
}

div span
{
    display: inline-block;
    visibility: hidden;
}

Upvotes: 7

blo0p3r
blo0p3r

Reputation: 6850

Use another nested <span> tag inside your tag. The inside tag is the one that would be hidden while the outside keeps positionning.

EX: 

<span id="outer">
  <span id="inner">
    <!-- whatever you want -->
  </span>
</span>

And then you style could look someting like this :

#outer {
  width: xxx;
  height: xxx;
  /*any other attributes */
}
#inner {
  display: inline; /*this is what would change to hidden*/
}

Hope this helps!

Upvotes: 0

Related Questions