CODEWITHSUNDEEP
javascriptoverflow
Savas Vedova
Savas Vedova

Reputation: 5692

JavaScript - Visible Text of a DIV

----------------------------------------------------
| This is my text inside a div and I want the overf|low of the text to be cut
----------------------------------------------------

Please note that I want the overflow to be removed, so the CSS ellipsis property would not work for me. So basically, I want that the text above to appear like this:

----------------------------------------------------
| This is my text inside a div and I want the overf|
----------------------------------------------------

How is this possible with pure JavaScript?

EDIT

I need a JavaScript function to crop the text because I need to count the characters of the visible text.

Upvotes: 15

Views: 10220

Answers (5)

tim peterson
tim peterson

Reputation: 24305

try this, it requires a fixed width if that is ok with you: http://jsfiddle.net/timrpeterson/qvZKw/20/

HTML:

<div class="col">This is my text inside a div and I want the overf|low of the text to be cut</div>

CSS:

.col { 
   width:120px; 
    overflow: hidden;
   white-space:nowrap;

 }​

Upvotes: 2

Paul
Paul

Reputation: 141827

You can do this with Javascript. Here is a function that counts the number of visible characters in an element, regardless of external css sheets and inline styles applied to the element. I've only tested it in Chrome, but I think it is cross browser friendly:

function count_visible(el){
    var padding, em, numc;
    var text = el.firstChild.data;
    var max = el.clientWidth;

    var tmp = document.createElement('span');
    var node = document.createTextNode();
    tmp.appendChild(node);
    document.body.appendChild(tmp);

    if(getComputedStyle)
        tmp.style.cssText = getComputedStyle(el, null).cssText;
    else if(el.currentStyle)
        tmp.style.cssText = el.currentStyle.cssText;

    tmp.style.position = 'absolute';
    tmp.style.overflow = 'visible';
    tmp.style.width = 'auto';

    // Estimate number of characters that can fit.
    padding = tmp.style.padding;
    tmp.style.padding = '0';
    tmp.innerHTML = 'M';
    el.parentNode.appendChild(tmp);
    em = tmp.clientWidth;
    tmp.style.padding = padding;      
    numc = Math.floor(max/em);

    var width = tmp.clientWidth;

    // Only one of the following loops will iterate more than one time
    // Depending on if we overestimated or underestimated.

    // Add characters until we reach overflow width
    while(width < max && numc <= text.length){
        node.nodeValue = text.substring(0, ++numc);
        width = tmp.clientWidth;
    }

    // Remove characters until we no longer have overflow
    while(width > max && numc){
        node.nodeValue = text.substring(0, --numc);
        width = tmp.clientWidth;
    }

    // Remove temporary div
    document.body.removeChild(tmp);

    return numc;
}

JSFiddle Example

Upvotes: 3

robrich
robrich

Reputation: 13205

You're trying to force a CSS problem into JavaScript. Put the hammer away and get out a screwdriver. http://en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nail

Solving the answer of character count is probably irrelevant if you take a step back. The last character could be only partially visible, and character count is drastically different given font size changes, the difference of width between W an i, etc. Probably the div's width is more important than the character count in the true problem.

If you're still stuck on figuring out the characters visible, put a span inside the div around the text, use the css provided in other answers to this question, and then in JavaScript trim one character at a time off the string until the span's width is less than the div's width. And then watch as your browser freezes for a few seconds every time you do that to a big paragraph.

Upvotes: 2

Ry-
Ry-

Reputation: 224912

Okay, I didn't see the addendum to the question. Although I had previously said it wasn't possible to do this using JavaScript and a font that isn't fixed-width... it actually is possible!

You can wrap each individual character in a <span>, and find the first <span> that is outside the bounds of the parent. Something like:

function countVisibleCharacters(element) {
    var text = element.firstChild.nodeValue;
    var r = 0;

    element.removeChild(element.firstChild);

    for(var i = 0; i < text.length; i++) {
        var newNode = document.createElement('span');
        newNode.appendChild(document.createTextNode(text.charAt(i)));
        element.appendChild(newNode);

        if(newNode.offsetLeft < element.offsetWidth) {
            r++;
        }
    }

    return r;
}

Here's a demo.

Upvotes: 6

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

.col { width:40px; overflow: hidden; white-space:nowrap; }

White-space: nowrap; is needed when the content has spaces.

Either way, long words in single lines do not appear. http://jsfiddle.net/h6Bhb/

Upvotes: 0

Related Questions