Skip to main content

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 broadcastDancer2/2
    next note >+ add note

    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.

    next note >+ add note

    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>

    next note >add note

    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.

    next note >add note

    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.

    next note >add note

    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

    next note >add note

    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 PHPMilan2/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
    next note >+ add note

    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 withBattleAxe2/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
    next note >+ add note

    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
    next note >+ add note

    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 );

    next note >+ add note

    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 classesSigDesign1/2
      yeah but it cuts up the words that are longer than the set width.dashofpower2/2
    next note >+ add note

    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.

    next note >add note

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

    next note >add note

    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*

    + add note

    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

Login or Register to respond to this

Skip to main content