Hide text using css

Question

I have a tag in my html like this    lt h1 gt My Website Title Here lt  h1 gt    Using css I want to replace the text with my actual logo  I ve got the logo there no problem via resizing the tag and putting a background image in via css  However  I can t figure out how to get rid of the text  I ve seen it done before basically by pushing the text off the screen  The problem is I can t remember where I saw it

User · Answer

Just add font-size  0  to your element that contains text    x000D   x000D   hidden   font-size  0    x000D    font-size  0  hides text   lt span class  hidden  gt  You can t see me     lt  span gt  x000D   x000D   x000D

User · Answer

This is one way   h1       text-indent  -9999px                     sends the text off-screen        background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width  600px      white-space  nowrap                because only the first line is indented       h1 a       outline  none      prevents dotted line when link is active        Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create   h1       background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width   600px          Hide the text         text-indent  100       white-space  nowrap      overflow  hidden

User · Answer

The answer is to create a span with the property    display none    You can find an example at this site

User · Answer

Jeffrey Zeldman suggests the following solution    hide-text     text-indent  100     white-space  nowrap    overflow  hidden      It should be less resource intensive than -9999px   Please read all about it here    http   www zeldman com 2012 03 01 replacing-the-9999px-hack-new-image-replacement

User · Answer

The best answer works for short text  but if the text wraps it just shows up in the image    One way to do it is catch errors with a jquery handler  Try to load an image  if it fails it throws an error       logo img   error function            logo   html   lt h1 gt My Website Title Here lt  h1 gt           See SAMPLE CODE

User · Answer

This is actually an area ripe for discussion  with many subtle techniques available  It is important that you select develop a technique that meets your needs including  screen readers  images css scripting on off combinations  seo  etc   Here are some good resources to get started down the road of standardista image replacement techniques   http   faq css-standards org Image Replacement  http   www alistapart com articles fir  http   veerle duoh com blog links  l-10

User · Answer

A solution that works for me    HTML   lt div class  website title  gt  lt span gt My Website Title Here lt  span gt  lt  div gt    CSS    website title       background-image  url     images home png        background-repeat  no-repeat      height  18px      width  16px      website title span       visibility  hidden

User · Answer

To hide text from html use text-indent property in css   classname    text-indent  -9999px   white-space  nowrap          for dynamic text you need to add white-space  so your applied css will not disturb  nowrap means text will never wrap to the next line  the text continues on the same line until a  lt br gt  tag is encountered

User · Answer

The most cross-browser friendly way is to write the HTML as   lt h1 gt  lt span gt Website Title lt  span gt  lt  h1 gt    then use CSS to hide the span and replace the image  h1  background url  nicetitle png    h1 span  display none     If you can use CSS2  then there are some better ways using the content property  but unfortunately the web isn t 100  there yet

User · Answer

you can simply hide your text by add this attribute  font-size  0  important

User · Answer

Why don t you use     lt li gt  lt a href     gt bla lt  a gt  lt  li gt   a       opacity  0 0      font-size  1px     li       background-image  url  test jpg        If you haven t any span or div element  it works perfectly for links

User · Answer

I usually use   span hide     position fixed    right -5000px

User · Answer

The answer is to create a span with the property    display none    You can find an example at this site

User · Answer

h1       text-indent  -3000px       line-height  3000px      background-image  url  LOGO png       height  100px  width   600px      height and width are a must

User · Answer

To hide text from html use text-indent property in css   classname    text-indent  -9999px   white-space  nowrap          for dynamic text you need to add white-space  so your applied css will not disturb  nowrap means text will never wrap to the next line  the text continues on the same line until a  lt br gt  tag is encountered

User · Answer

I usually use   span hide     position fixed    right -5000px

User · Answer

So many complicated solutions   The easiest one is simply to use   color rgba 0 0 0 0

User · Answer

The best answer works for short text  but if the text wraps it just shows up in the image    One way to do it is catch errors with a jquery handler  Try to load an image  if it fails it throws an error       logo img   error function            logo   html   lt h1 gt My Website Title Here lt  h1 gt           See SAMPLE CODE

User · Answer

The most cross-browser friendly way is to write the HTML as   lt h1 gt  lt span gt Website Title lt  span gt  lt  h1 gt    then use CSS to hide the span and replace the image  h1  background url  nicetitle png    h1 span  display none     If you can use CSS2  then there are some better ways using the content property  but unfortunately the web isn t 100  there yet

User · Answer

So many complicated solutions   The easiest one is simply to use   color rgba 0 0 0 0

User · Answer

I don t recall where I picked this up  but have been using it successfully for ages      hide-text       font  0 0 a     text-shadow  none     color  transparent   My mixin is in sass however you can use it any way you see fit  For good measure I generally keep a  hidden class somewhere in my project to attach to elements to avoid duplication

User · Answer

Do not use   display none    It makes the content inaccessible  You want screen-readers to see your content  and visually style it by replacing the text with an image  like a logo   By using text-indent  -999px  or a similar method  the text is still there      just not visually there  Use display none  and the text is gone

User · Answer

One of the ways I achieve this is to use  before or  after  I ve used this approach for several years  and particularly works great with glyph vector icons   h1       position  relative      text-indent  -9999px                     sends the text off-screen          h1 before       position  absolute      top  0      left  0      z-index  1      display  block      width  600px      height  100px      content           background  transparent url  the img png  0 0 no-repeat

User · Answer

See mezzoblue for a nice summary of each technique  with strengths and weaknesses  plus example html and css

User · Answer

I don t recall where I picked this up  but have been using it successfully for ages      hide-text       font  0 0 a     text-shadow  none     color  transparent   My mixin is in sass however you can use it any way you see fit  For good measure I generally keep a  hidden class somewhere in my project to attach to elements to avoid duplication

User · Answer

The answer is to create a span with the property    display none    You can find an example at this site

User · Answer

Why not simply use   h1   color  transparent

User · Answer

h1     background url     images logo png   no-repeat     height 180px     width 200px     display inline-block     font-size 0px  important     text-intent -9999999px  important     color transparent  important

User · Answer

you can use the css background-image property and z-index to ensure the image stays in front of the text

User · Answer

If we can edit the markup  life can be easier  just remove text and be happy  But sometimes the markup was placed by JS code or we just aren t allowed to edit it at all  too bad css turned to be the only weapon placed at our disposal   We cannot place a  lt span gt  wrapping the text and hide the whole tag  By the way  some browsers do not only hides elements with display none but also disables the components inside   Both font-size 0px and color transparent may be good solutions  but some browsers don t understand them  We can t rely on them   I suggest   h1     background-image  url  LOGO png       Our image      text-indent  -3000px      Send text out of viewable area      height  100px  width  600px      height and width are a must  agree      overflow hidden      make sure our size is respected        Using overflow hidden enforces our width  amp  height   Some browsers  will not name them    IE  may read width and height as min-width and min-height  I want to prevent box to be enlarged

User · Answer

Why not simply use   h1   color  transparent

User · Answer

Use Condition tag for different browser and using css you have to place  height 0px and width 0px also you have to place font-size 0px

User · Answer

Why don t you use     lt li gt  lt a href     gt bla lt  a gt  lt  li gt   a       opacity  0 0      font-size  1px     li       background-image  url  test jpg        If you haven t any span or div element  it works perfectly for links

User · Answer

If the point is simply to make the text inside the element invisible  set the color attribute to have 0 opacity using a rgba value such as color rgba 0 0 0 0   clean and simple

User · Answer

Do not use   display none    It makes the content inaccessible  You want screen-readers to see your content  and visually style it by replacing the text with an image  like a logo   By using text-indent  -999px  or a similar method  the text is still there      just not visually there  Use display none  and the text is gone

User · Answer

Just add font-size  0  to your element that contains text    x000D   x000D   hidden   font-size  0    x000D    font-size  0  hides text   lt span class  hidden  gt  You can t see me     lt  span gt  x000D   x000D   x000D

User · Answer

h1       text-indent  -3000px       line-height  3000px      background-image  url  LOGO png       height  100px  width   600px      height and width are a must

User · Answer

This is actually an area ripe for discussion  with many subtle techniques available  It is important that you select develop a technique that meets your needs including  screen readers  images css scripting on off combinations  seo  etc   Here are some good resources to get started down the road of standardista image replacement techniques   http   faq css-standards org Image Replacement  http   www alistapart com articles fir  http   veerle duoh com blog links  l-10

User · Answer

Jeffrey Zeldman suggests the following solution    hide-text     text-indent  100     white-space  nowrap    overflow  hidden      It should be less resource intensive than -9999px   Please read all about it here    http   www zeldman com 2012 03 01 replacing-the-9999px-hack-new-image-replacement

User · Answer

h1     background url     images logo png   no-repeat     height 180px     width 200px     display inline-block     font-size 0px  important     text-intent -9999999px  important     color transparent  important

User · Answer

The most cross-browser friendly way is to write the HTML as   lt h1 gt  lt span gt Website Title lt  span gt  lt  h1 gt    then use CSS to hide the span and replace the image  h1  background url  nicetitle png    h1 span  display none     If you can use CSS2  then there are some better ways using the content property  but unfortunately the web isn t 100  there yet

User · Answer

See mezzoblue for a nice summary of each technique  with strengths and weaknesses  plus example html and css

User · Answer

lt style gt  body        visibility hidden   body  moz-signature p      visibility visible    lt  style gt    The above works well in latest Thunderbird also

User · Answer

The most cross-browser friendly way is to write the HTML as   lt h1 gt  lt span gt Website Title lt  span gt  lt  h1 gt    then use CSS to hide the span and replace the image  h1  background url  nicetitle png    h1 span  display none     If you can use CSS2  then there are some better ways using the content property  but unfortunately the web isn t 100  there yet

User · Answer

If we can edit the markup  life can be easier  just remove text and be happy  But sometimes the markup was placed by JS code or we just aren t allowed to edit it at all  too bad css turned to be the only weapon placed at our disposal   We cannot place a  lt span gt  wrapping the text and hide the whole tag  By the way  some browsers do not only hides elements with display none but also disables the components inside   Both font-size 0px and color transparent may be good solutions  but some browsers don t understand them  We can t rely on them   I suggest   h1     background-image  url  LOGO png       Our image      text-indent  -3000px      Send text out of viewable area      height  100px  width  600px      height and width are a must  agree      overflow hidden      make sure our size is respected        Using overflow hidden enforces our width  amp  height   Some browsers  will not name them    IE  may read width and height as min-width and min-height  I want to prevent box to be enlarged

User · Answer

Using zero value for font-size and line-height in the element does the trick for me    lt style gt       text           display  block          width  200px          height  200px           font-size  0          line-height  0         lt  style gt    lt span class  text  gt      Invisible Text  lt  span gt

User · Answer

This is one way   h1       text-indent  -9999px                     sends the text off-screen        background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width  600px      white-space  nowrap                because only the first line is indented       h1 a       outline  none      prevents dotted line when link is active        Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create   h1       background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width   600px          Hide the text         text-indent  100       white-space  nowrap      overflow  hidden

User · Answer

If the point is simply to make the text inside the element invisible  set the color attribute to have 0 opacity using a rgba value such as color rgba 0 0 0 0   clean and simple

User · Answer

Hiding text with accessibility in mind   In addition to the other answers  here is another useful approach for hiding text   This method effectively hides the text  yet allows it to remain visible for screen readers  This is an option to consider if accessibility is a concern    sr-only       position  absolute      width  1px      height  1px      padding  0      margin  -1px      overflow  hidden      clip  rect 0 0 0 0       border  0      It s worth pointing out that this class is currently used in Bootstrap 3     If you re interested in reading about accessibility    Web Accessibility Initiative  WAI  MDN Accessibility documentation

User · Answer

This worked for me with span  knockout validation     lt span class  validationMessage  gt This field is required  lt  span gt    validationMessage       background-image  url  images exclamation png        background-repeat  no-repeat      margin-left  5px      width  16px      height  16px      vertical-align  top          Hide the text         display  inline-block      overflow  hidden      font-size  0px

User · Answer

Hiding text with accessibility in mind   In addition to the other answers  here is another useful approach for hiding text   This method effectively hides the text  yet allows it to remain visible for screen readers  This is an option to consider if accessibility is a concern    sr-only       position  absolute      width  1px      height  1px      padding  0      margin  -1px      overflow  hidden      clip  rect 0 0 0 0       border  0      It s worth pointing out that this class is currently used in Bootstrap 3     If you re interested in reading about accessibility    Web Accessibility Initiative  WAI  MDN Accessibility documentation

User · Answer

This is actually an area ripe for discussion  with many subtle techniques available  It is important that you select develop a technique that meets your needs including  screen readers  images css scripting on off combinations  seo  etc   Here are some good resources to get started down the road of standardista image replacement techniques   http   faq css-standards org Image Replacement  http   www alistapart com articles fir  http   veerle duoh com blog links  l-10

User · Answer

This is actually an area ripe for discussion  with many subtle techniques available  It is important that you select develop a technique that meets your needs including  screen readers  images css scripting on off combinations  seo  etc   Here are some good resources to get started down the road of standardista image replacement techniques   http   faq css-standards org Image Replacement  http   www alistapart com articles fir  http   veerle duoh com blog links  l-10

User · Answer

you can use the css background-image property and z-index to ensure the image stays in front of the text

User · Answer

repalce content with the CSS   h1   font-size  0px    h1 after       content   new content       font-size  15px

User · Answer

lt style gt  body        visibility hidden   body  moz-signature p      visibility visible    lt  style gt    The above works well in latest Thunderbird also

User · Answer

Try this code to shorten and hide text   x000D   x000D   hidetxt  x000D   x000D    width  346px  x000D    display  table-caption  x000D    white-space  nowrap  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    cursor  no-drop  x000D     x000D    x000D   x000D   hidetxt hover    x000D   x000D    visibility  hidden  x000D     x000D    x000D   lt div class  hidetxt  gt  x000D   lt p gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    or to hide use in your css class  hidetxt   visibility  hidden

User · Answer

This is one way   h1       text-indent  -9999px                     sends the text off-screen        background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width  600px      white-space  nowrap                because only the first line is indented       h1 a       outline  none      prevents dotted line when link is active        Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create   h1       background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width   600px          Hide the text         text-indent  100       white-space  nowrap      overflow  hidden

User · Answer

you can use the css background-image property and z-index to ensure the image stays in front of the text

User · Answer

you can simply hide your text by add this attribute  font-size  0  important

User · Answer

One of the ways I achieve this is to use  before or  after  I ve used this approach for several years  and particularly works great with glyph vector icons   h1       position  relative      text-indent  -9999px                     sends the text off-screen          h1 before       position  absolute      top  0      left  0      z-index  1      display  block      width  600px      height  100px      content           background  transparent url  the img png  0 0 no-repeat

User · Answer

A solution that works for me    HTML   lt div class  website title  gt  lt span gt My Website Title Here lt  span gt  lt  div gt    CSS    website title       background-image  url     images home png        background-repeat  no-repeat      height  18px      width  16px      website title span       visibility  hidden

User · Answer

repalce content with the CSS   h1   font-size  0px    h1 after       content   new content       font-size  15px

User · Answer

This is one way   h1       text-indent  -9999px                     sends the text off-screen        background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width  600px      white-space  nowrap                because only the first line is indented       h1 a       outline  none      prevents dotted line when link is active        Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create   h1       background-image  url  the img png       shows image        height  100px                            be sure to set height  amp  width        width   600px          Hide the text         text-indent  100       white-space  nowrap      overflow  hidden

User · Answer

Using zero value for font-size and line-height in the element does the trick for me    lt style gt       text           display  block          width  200px          height  200px           font-size  0          line-height  0         lt  style gt    lt span class  text  gt      Invisible Text  lt  span gt

User · Answer

The answer is to create a span with the property    display none    You can find an example at this site

User · Answer

you can use the css background-image property and z-index to ensure the image stays in front of the text

User · Answer

This worked for me with span  knockout validation     lt span class  validationMessage  gt This field is required  lt  span gt    validationMessage       background-image  url  images exclamation png        background-repeat  no-repeat      margin-left  5px      width  16px      height  16px      vertical-align  top          Hide the text         display  inline-block      overflow  hidden      font-size  0px

User · Answer

Use Condition tag for different browser and using css you have to place  height 0px and width 0px also you have to place font-size 0px

User · Answer

Try this code to shorten and hide text   x000D   x000D   hidetxt  x000D   x000D    width  346px  x000D    display  table-caption  x000D    white-space  nowrap  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    cursor  no-drop  x000D     x000D    x000D   x000D   hidetxt hover    x000D   x000D    visibility  hidden  x000D     x000D    x000D   lt div class  hidetxt  gt  x000D   lt p gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    or to hide use in your css class  hidetxt   visibility  hidden

[css] Hide text using css

Examples related to css