Geek asks and answers

Fill content (html) in div for element height and width using javascript and jquery

I get long text using ajax in json form. I want to fill this content in size of fix height

Suppose I have a div height of 500px and a width of 300px. and font size is 16 pixels

I need any recursive javascript method that can fill the data according to the height and width of the div and can return me the remaining text.

if anyone can do this then give me a solution.

Thanks at Advance

+3
source share
2 answers

Why not just put everything in the div and in the div that you set Overflow = "hidden"

div, , , , div

var s = 'Your long long long long long long long long long long content';
var i = 0;
var tmpdiv = $('<div style="width:50px; height:auto; position:absolute; left:-99999px"/>').appendTo(document.body);
while (i < s.length-1 && tmpdiv.height() < 50){
  tmpdiv.append(s[i]);
  i++;
}

$('#fixdiv').html(tmpdiv.html());
0

, <span>, <div>. , div :

// Be careful about text nodes, or use firstElementChild instead
var span = div.firstChild, text = span.innerText, rest = "";
if (span.offsetHeight > 500) {
    var totalLength = 0, markLength, i = 0,
        rects = span.getClientRects();
    for (; i < rects.length; i++) {
        totalLength += rects[i].right - rects[i].left;
        if (rects[i].bottom - rects[0].top <= 500)
            markLength = totalLength;
    }
    var mark = Math.floor(text.length * markLength / totalLength);
    span.textContent = text.substring(0, mark);
    rest = text.substring(mark);
}

rest . , . , , .

+1

More articles:


All Articles