...

View Full Version : Hiding text that's not in a tag



denhamd2
01-17-2008, 09:19 AM
I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas?

Majoracle
01-17-2008, 09:33 AM
You need the non-bold text in a separate tag (other than <span>), such as <p>. So if you can, wrap all the non-bold text in <p> tags and use this CSS to hide it:


.schedule p {
display:none;
}


<div class="schedule">
<span>Header</span>
<p>hidden text. hidden text. hidden text. hidden text. hidden text. hidden text. hidden text. hidden text.</p>
</div>

denhamd2
01-17-2008, 11:24 AM
its not possible to change it to this way... ie. it would be:


<div class="schedule"><span style="font-weight: bold; color: ff0000;">Monday</span><br />Line 2<br /><span style="font-weight: bold; color: ff0000;">Monday</span><br />Line 4</div>

So you can see I need to show only the text in the <span> tags

ahallicks
01-17-2008, 11:49 AM
Probably not possible... and certainly not semantic. How about trying something like (and this won't work, but meh):



.shedule {
display: none;
}

.schedule span {
display: inline; /* (or block) */
}


But I don't think that would work because you aren't displaying the outer div so you can't see the contents inside.

VIPStephan
01-17-2008, 11:57 AM
You could only do it with JavaScript, I guess, as any text is a node and CSS can only address element nodes while JS can also address plain text nodes.

medigerati
01-18-2008, 03:31 AM
You can also try this:


.shedule {
position: relative;
left: -999em;
}

.schedule span {
position: relative;
left: 999em;
}

or this:


.shedule {
margin-left: -999em;
}

.schedule span {
margin-left: 999em;
}

At least, I think one of those should work.

Majoracle
01-18-2008, 05:44 AM
That seems messy. You'd still have the gaps between the spans, so people would know something is there.


.shedule {
display: none;
}
.schedule span {
display: inline; /* (or block) */
}

That wont work either. It'll still show nothing for stuff in <span> tags. So unless you can place the text you don't want to show in some tags of its own, I think it's impossible.

coothead
01-18-2008, 08:34 AM
Hi there denhamd2,

have a look at this example, it may suit your requirements...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.schedule {
visibility:hidden;
}
.schedule h4 {
visibility:visible;
color:#f00;
}
</style>

</head>
<body>

<div class="schedule">
<h4>Monday</h4>
Line 2
<h4>Monday</h4>
Line 4
</div>

</body>
</html>
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum