Text-Display:none CSS? Jquery?

Question

<label><input type="radio">TextmakesNoSense</label>

So this dynamically generated content is Read-Only... So I thought...

label {
    color:#fff;
    font-size:0.0001em;
}

on a webpage with a white background, however seems very sneeky to me and if you highlight the buttons you can still see there is text there, on some browsers anyways.

So u think a new version of CSS would include "text-display:none;" ?

I could insert some jquery instead?

score 6 · Answer 1 · answered May 22 '13 at 04:04

6

Try text-indent:-9999px. This should move the text far off to the left so it's off the screen.

answered May 22 '13 at 04:04

Niet the Dark Absol

320,036
81
464
592

1

This doesn't bode well for screenreaders if it is just nonsensical content. – SomeShinyObject May 22 '13 at 04:32

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

You could put a span tag around it:

<label><input type="radio"><span class="ro-text">TextmakesNoSense</span></label>

CSS:

.ro-text {
    visibility: hidden;
}

Or

.ro-text {
    display: none;
}

Depends on what you are trying to accomplish.

If you need to add the span dynamically, use this jQuery:

$('label').html($('label').find('input')[0].outerHTML + '<span class="ro-text">'+$('label').text()+'</span>');

For a quick explanation of what

http://jsfiddle.net/Cwalkdawg/h5kYQ/2/

A span inside a label is "semantic" in case you were worried.

edited May 23 '17 at 10:34

Community

1
1

answered May 22 '13 at 04:08

SomeShinyObject

7,581
6
39
59

I'm going to give you props for simply making a working jfiddle. I have no idea why it looks like an intentional syntax error on col 127 (after text()) however I dont know jquery that well and its working on your jfiddle. Direct pasting of this code does not work on my page for some reason.. I'll keep playing with this it seems to be the cleanest option. I'm just trying to accomplish "no display" for the text that I dont want to display. – May 22 '13 at 13:18
Just to reply to Kolink - I liked your answer too, however just because the file is Read Only doesn't mean I can't edit the DOM with jQuery. – May 22 '13 at 13:23
@AndrewDurocher, it was a syntax error that I forgot to update. I updated the jsFiddle and the answer! Sorry about that. – SomeShinyObject May 22 '13 at 13:24

ShibinRagh · Answer 3 · 2013-05-22T04:15:41.607

2

Try

label {
    color:#fff;
    font-size:0.0001em;
    text-indent:-9999px;
}

edited May 22 '13 at 04:15

answered May 22 '13 at 04:10

ShibinRagh

6,530
4
35
57

CoalaWeb · Answer 4 · 2014-10-22T12:02:47.690

I prefer to use this method when I have text to hide.

.label {
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.0001em
}

General Advantages: Really long strings of text will never flow into the container because they always flow away from the container.

Advantages over the common -9999px method: Performance is dramatically improved because a 9999px box is not drawn. (Yes, the browser really does draw a huge box of to the side.)

References: Website Article

score 0 · Answer 5 · answered May 22 '13 at 04:08

0

font-size:0px;

That seems to do the trick, not entirely sure what you are trying to achieve.

answered May 22 '13 at 04:08

Isaac

11,409
5
33
45

Fails in Chrome, where the default configuration is that the minimum allowable `font-size` is 6pt. – Niet the Dark Absol May 22 '13 at 04:11
I wrote this in chrome using conceptfactory.co.nz/editor.html If it isn't allowed, then I don't know why it worked. – Isaac May 22 '13 at 04:17

score 0 · Answer 6 · answered May 22 '13 at 05:00

0

Try this, may be it will solve your problem.

label {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    overflow: hidden;

}

answered May 22 '13 at 05:00

Alex

996
2
10
17

score 0 · Answer 7 · answered Mar 25 '19 at 10:24

As written above font-size:0 is one of options. But sometimes it's messing with dimensions or size of text-container. I'm using another trick which doesn't change anything except text, just setting font color with alpha channel - 0.

.label{
color: rgba(0,0,0,0);
}

Text-Display:none CSS? Jquery?

7 Answers7