Hide first part of content

HTML & CSS
1

I have been given the task hiding the first part of a paragraph from view. I cannot edit the HTML on the CSS

The HTML content that I need CSS to edit is:

<div class=“FormID”>
<p>HelloWorld Form #27-356</p>
<p id=“Form Date”> YYYY-MM-DD </p>
</div>

Basically I need hide the HelloWorld portion of the paragraph and leave the Form #27-356 and the rest alone

I have tried different versions of image replacement and the best I can do is blank out the entire paragraph.

<style>
div.FormID p{

background: url(blank.GIF);			
overflow: hidden;

}

</style>

Does anyone have any suggestions/solutions?

Thanks in advance
J

2

I didn’t understood the requirement exactly. See if this can answer your requirement:

<div class=“FormID”>
<p><div style=“display:none”>HelloWorld</div> Form #27-356</p>
<p id=“Form Date”> YYYY-MM-DD </p>
</div>

3

If you want to just hide it then to

#FormID p{visibility:hidden;}

If you want the whitespace left from the <p> gone then give it display:none; instead of visibility:hidden

4

Thanks for the quick replies guys but neither works.
Winwinmantra - I am unable to edit the html code at all but I have complete authority over the CSS code. So this cannot change:

<div class=“FormID”>
<p>HelloWorld Form #27-356</p>
<p id=“Form Date”> YYYY-MM-DD </p>
</div>

RyanReese - That hide the entire portion of the paragraph, I just want to hide the “HelloWorld” portion and leave the “Form #27-356” visible

5

If “ID” was used in place of “class” in the div tag then it could have been possible by using Javascript. Otherwise as per my knowledge, it can’t be done.

6

You’d have to wrap an element around the HelloWorld and then give that display:none;

So the other posters code does work, you probably implimented it wrongly :slight_smile:

@ winwinmantra,

document.getElementByID(‘idhere’); That’s for IDs.

document.getElementsByClassName(‘class’); That’s for classes.

7

Hi,

Assuming that the id on the p element is a typo as you can’t have 2 ids on the same element then you could do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:30px;
}
.FormID p {
    text-indent:-4.5em;
    overflow:hidden;
    position:relative;
}
* html .FormID p{zoom:1.0}
.FormID p#Form-Date {
    text-indent:0;
    overflow:visible
}
</style>
</head>
<body>
<div class="FormID">
    <p>HelloWorld Form #27-356</p>
    <p id="Form-Date"> YYYY-MM-DD </p>
</div>
</body>
</html>

It’s a little fragile though as it depends on font-size.

8

Thanks Paul O’B

That is exactly what I am looking for. I have been assured that the HTML will not change for a long time so the font isn’t an issue.

Thanks so much

9

You don’t have control over the font size however :). Users can increase/decrease the font size and which is why I shyed away from that solution because it can be broken very easily :). Though if you can’t change the HTML I guess that will have to do.

10

I have tested it in Firefox, Chrome and IE.

It looks like there is sufficient space between the words for this solution to work in all but the extreme large font sizes and screen resolutions (went down to 800x600)

Thanks to everyone who posted.

J