Break lines in CSS
- Started
- Last post
- 14 Responses
- dashofpower
To all CSS gurus:
I was wondering if there was a way to create this text "effect" in CSS so that the words show up like this:
THIS
IS
A
TITLEinstead of this:
THIS IS A TITLE
I'm not talking about break lines within the actual blog title. I need it to be in the CSS so that I don't have to go through every single entry to get rid of the break line when I decide to change the layout.
Thanks in advance!
- Dancer0
put <br /> after every word
- I already said I don't want to have to put br after every word.dashofpower
- Sorry only read the rest of your post after I had broadcastDancer
- pylon0
Dancer has the answer, I'm afraid.
Unless you wrap each word in its own span or div and the float them.
- MSTRPLN0
<p class="one">THIS</p>
<p class="two">IS</p>
<p class="three">A</p>
<p class="four">TITLE</p>
- dashofpower0
This is for Wordpress.
Any other way other than putting a span or div to each word? Cause that's going to be a LOT of entries to change.
Hopefully that makes sense.
- pylon0
Nope, that's the way it's done.
Yes, it makes sense.
- dashofpower0
Thanks
- mikotondria30
should really use php, far more control over your content..
something like... strreplace(" ","<br>",$mytext);
just search the string functions at php.net- Aye, but he's using WP as the CMS it sounds, so php is likely outside his realm.pylon
- WP is PHPMilan
- No shit, but but somebody looking for css help in wp may not know much php.pylon
- well its not much php to learn - it'd do him good...mikotondria3
- Haha, agreed.pylon
- It'll do her good.dashofpower
- BattleAxe0
.class { width: 1px;} ?
- that sounds like it would work. Or just just a narrow width so that most words wrap on to a new line.thatboyneave
- shorter words won't wrap but something to play withBattleAxe
- Most words, but no all words. And what if the width is narrower than the longest word?pylon
- then BattleAxe's 1px suggestion might work?thatboyneave
- just did 1px width to the title of this thread with firebug and it works.thatboyneave
- rob10
<ul>
<li>THIS</li>
<li>IS</li>
<li>A</li>
<li>TITLE</li>
</ul>
- acescence0
paste this in your theme's functions.php file...
function title_space_filter( $content ){
return str_replace( " ", "<br />", $content );
}
add_filter( 'the_title', 'title_space_filter', 1 );- sounds easy enough, thanks.dashofpower
- if it 'does you good', I would like credit, please.mikotondria3
- didn't workdashofpower
- did you paste it into the current theme's functions.php file? works when i try it out here...acescence
- yep. i end up getting that error message saying which line there was a mistake. :/ thanks anywaydashofpower
- http://pastebin.com/…acescence
- perfection. :) thank you very much!dashofpower
- perfection. :) thank you very much!dashofpower
- SigDesign0
simple method would be to just wrap the words in a div and set a width so they go to a new line...
- wait someone already covered this with classesSigDesign
- yeah but it cuts up the words that are longer than the set width.dashofpower
- moth0
What battleaxe said.
- fiesta0
JAVASCRIPTS!!!
- Stugoo0
*looks in and sees all is under control, nods and leaves*