Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Wordwrap

  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Wordwrap

    First to say Hi to you all!
    Is there way in javascript to do this: I get news title from msql and if it to long I wont it to break it in two spans, to get

    Code:
     <h2>
      <span>Show unread posts since</span>
      <span>last visit.</span>
    </h2>
    from this

    Code:
     <h2>
      <span>Show unread posts since last visit.</span>
    </h2>
    So, if is h2 weight 100px to break up in two spans whats out of that 100px.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    set the width of the h2 to 100px, it will wordwrap its content as needed to fit
    Code:
    <h2 style="width:100px">>
      <span>Show unread posts since last visit.</span>
    </h2>

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    But then i will get box, I wona get something like in this tutorial but to do it automaticly, not manualy insert spans
    http://css-tricks.com/text-blocks-over-image/

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    will it only ever be two lines, or is there the possibility that your string will be so long that you will need to insert multiple line breaks?

    if you only need to insert one, there's probably a fancier way of doing this, but here's one option - set the maxchar number for how many characters you want before putting a line break at the next space:

    Code:
    <body>
    <h2>
      <span id="txt">Show unread posts since last visit.</span>
    </h2>
    <script>
    var str=document.getElementById("txt").innerHTML
    maxchar=15
    if(str.length>maxchar){
    brk=str.indexOf(" ", maxchar)
    str1=str.slice(0,brk)+"<br>"+str.slice(brk)
    document.getElementById("txt").innerHTML=str1
    }
      </script>
    </body>

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    var str=document.getElementById("txt").innerHTML
    maxchar=15
    if(str.length>maxchar){
    brk=str.indexOf(" ", maxchar)
    str1=str.slice(0,brk)+"<span class='spacer'></span><br><div style='height:10px;'></div><span class='spacer'></span>"+str.slice(brk)
    document.getElementById("txt").innerHTML=str1
    }
    I added some code decorate css, but this only work in 2 lines, what if there will be 3 or more?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    hmmm...the more I look at this the more I think there must be an easier way. Here's the complicated way, anyway - there appears to be a problem with the logic of the code - I think it has to do with how the maxchar variable is reset, but I can't figure it out - some lines end up a few chars too long. I knew it should be something like maxchar=brk+15, but that just breaks it. My comments are in the code, anyway, if you want to play around with it:
    Code:
    <body>
    <h2>
      <span id="txt">Show unread posts since last visit and the rest of this really, really long string here...</span>
    </h2>
    <script>
    var str=document.getElementById("txt").innerHTML;
    allowed=15; //set to maximum characters per line
    start=0; //starts chopping at the beginiing of the string
    loop=str.length%allowed==0?str.length/allowed:parseInt(str.length/allowed)+1;//sets how many loops will happen
    if(str.length>allowed){ //if string is too long
    maxchar=allowed; //sets inital place to start looking for spaces
    document.getElementById("txt").innerHTML=""; //clear previous text
    for (var e=0; e<loop; e++) {
    brk=str.indexOf(" ", maxchar) //find the first space after maximum character count
    line=e==loop-1?str.slice(start):str.slice(start,brk) //if last loop, display all the rest of the text, if not, slice between start position and 1st break after maximum amount of chars
    start=brk; //starts chopping string at point that last one was chopped until
    maxchar+=allowed; //starts looking for spaces 15 places in front of where it was looking before
    document.getElementById("txt").innerHTML+=line+"<span class='spacer'></span><br><div style='height:10px;'></div><span class='spacer'></span>" //add sliced string to html
    	}
    }	
      </script>
    </body>

  • Users who have thanked xelawho for this post:

    Regoch (01-10-2012)

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    http://jsfiddle.net/aNUjB/14/
    here I find somethng that worked! Try to look at this!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •