Break lines in CSS 1414 Responses

Last post: 2 years, 5 months ago | Thread started: Aug 13, 09, 3:12 p.m.

RespondNew TopicDisable Images

• 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
  TITLE

  instead 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!

  Aug 13, 09, 3:12 p.m. – Permalink

• Dancer

  put <br /> after every word

  • I already said I don't want to have to put br after every word.– dashofpower1/2

    Sorry only read the rest of your post after I had broadcast– Dancer2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:12 p.m. – Permalink

• pylon

  Dancer has the answer, I'm afraid.
  Unless you wrap each word in its own span or div and the float them.

  • or display as block– fowleryo1/2

    Aye.– pylon2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:14 p.m. – Permalink

• MSTRPLN

  <p class="one">THIS</p>
  <p class="two">IS</p>
  <p class="three">A</p>
  <p class="four">TITLE</p>

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:15 p.m. – Permalink

• dashofpower

  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.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:17 p.m. – Permalink

• pylon

  Nope, that's the way it's done.
  Yes, it makes sense.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:17 p.m. – Permalink

• dashofpower

  Thanks

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:18 p.m. – Permalink

• mikotondria3

  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.– pylon1/6

    WP is PHP– Milan2/6

    No shit, but but somebody looking for css help in wp may not know much php.– pylon3/6

    well its not much php to learn - it'd do him good...– mikotondria34/6

    Haha, agreed.– pylon5/6

    It'll do her good.– dashofpower6/6

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:19 p.m. – Permalink

• BattleAxe

  .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.– thatboyneave1/5

    shorter words won't wrap but something to play with– BattleAxe2/5

    Most words, but no all words. And what if the width is narrower than the longest word?– pylon3/5

    then BattleAxe's 1px suggestion might work?– thatboyneave4/5

    just did 1px width to the title of this thread with firebug and it works.– thatboyneave5/5

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:20 p.m. – Permalink

• rob1

  <ul>
  <li>THIS</li>
  <li>IS</li>
  <li>A</li>
  <li>TITLE</li>
  </ul>

  • So very wrong ..– jamble1/2

    but so very right.– rob12/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:31 p.m. – Permalink

• acescence

  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.– dashofpower1/8

    if it 'does you good', I would like credit, please.– mikotondria32/8

    didn't work– dashofpower3/8

    did you paste it into the current theme's functions.php file? works when i try it out here...– acescence4/8

    yep. i end up getting that error message saying which line there was a mistake. :/ thanks anyway– dashofpower5/8

    http://pastebin.com/…– acescence6/8

    perfection. :) thank you very much!– dashofpower7/8

    perfection. :) thank you very much!– dashofpower8/8

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 3:42 p.m. – Permalink

• SigDesign

  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 classes– SigDesign1/2

    yeah but it cuts up the words that are longer than the set width.– dashofpower2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 4:49 p.m. – Permalink

• moth

  What battleaxe said.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 13, 09, 11:46 p.m. – Permalink

• fiesta

  JAVASCRIPTS!!!

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 14, 09, 2:23 a.m. – Permalink

• Stugoo

  *looks in and sees all is under control, nods and leaves*

  • K?– dMullins

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 14, 09, 2:28 a.m. – Permalink