Modify/hide text with css only

Question

I have a page where I don't have access to html who content this:

<span id="page_title_text">Welcome - Overview</span>

and I would like get this:

 <span id="page_title_text">Overview</span>

Due to the fact I cannot simply modify the text in the code itself, I wondering if is possible to hide the text "Welcome -" with css only (I have access to css related file).

Any suggestion ? thank

possible duplicate of [Change label text using Javascript](http://stackoverflow.com/questions/4488714/change-label-text-using-javascript) — Ryan, Jul 02 '13 at 23:19

score 2 · Answer 1 · answered Jul 02 '13 at 23:21

2

You can just update the text or do an actual replace:

Update Text

document.getElementById('page_title_text').innerHTML = 'Overview' ;

Replace

document.getElementById('page_title_text').innerHTML =
   document.getElementById('page_title_text').innerHTML.replace(/Welcome -/,'');

jsFiddle

answered Jul 02 '13 at 23:21

Daniel Gimenez

18,530
3
50
70

Yes you right this should work... However I'm stuck because I thinking to have access to JS on this page but no in fact. I have only access to css file. I suppose is not possible to get the same effect only using css ? – dotcom22 Jul 03 '13 at 00:00

score 1 · Answer 2 · answered Jul 03 '13 at 00:28

1

#page_title_text:before {
    content: "Welcome - ";
}

answered Jul 03 '13 at 00:28

Priidu Kull

107
2
15

Here's an updated preview of the above code: http://jsfiddle.net/8YZ8Y/1/ CSS Only FTW! – BigBlueHat Jul 03 '13 at 00:41
not exactly... My code content "Welcome - Overview" and I need to remove or hide "Welcome -" and not to add. Your code could allow to add something like display: none OR visibility: hidden but only for "Welcome -" ??? – dotcom22 Jul 03 '13 at 10:31

score 1 · Answer 3 · answered Jul 03 '13 at 00:52

1

People don't seem to be understanding your question...

I'm not sure if this can be accomplished elegantly.

You can try something "hacky" like this though:

#page_title_text {
    position:absolute;
    top: -15px;
    width: 70px;
}
#page_title_text:first-line {
    color:white;
}

JSFiddle

Of course this answer assumes existing styling etc. And it doesn't get rid of the textual content as well. There are just ways to hide it (with coloration or positioning etc.)

answered Jul 03 '13 at 00:52

Zack

45
6

yes this can work but #page_title_text is used for display also some other text title in others page. So the title will be partially hidden in all page and not only in the page where the title is Welcome - Overview. Any other suggestion ? – dotcom22 Jul 03 '13 at 10:40
Well only if you can select each page's #page_title_text uniquely with a more specific selector statement. But if now, you can attempt to cater the solution to all the pages by normalizing the content of that div to be able to generalize a styling that would cover them all. – Zack Jul 03 '13 at 16:29
I integrated a remote hosted calendar in my own site. The software allow to make some customization with JS and CSS but only in some specific area. Using JS is the way to go but they are not allowed in the area where I wanted make the change (css is allowed everywhere). In any case thank for your time... Cheers – dotcom22 Jul 03 '13 at 21:32

Modify/hide text with css only

3 Answers3

Update Text

Replace

jsFiddle