...

View Full Version : Wordwrap



Regoch
01-10-2012, 11:00 AM
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


<h2>
<span>Show unread posts since</span>
<span>last visit.</span>
</h2>

from this


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

mrhoo
01-10-2012, 02:51 PM
set the width of the h2 to 100px, it will wordwrap its content as needed to fit


<h2 style="width:100px">>
<span>Show unread posts since last visit.</span>
</h2>

Regoch
01-10-2012, 03:06 PM
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/

xelawho
01-10-2012, 05:02 PM
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:



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

Regoch
01-10-2012, 06:55 PM
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?

xelawho
01-10-2012, 09:14 PM
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:


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

Regoch
01-10-2012, 10:01 PM
http://jsfiddle.net/aNUjB/14/
here I find somethng that worked! Try to look at this!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum