Shorten long text according to width in pixels

Question

I would like to shorten very long descriptions to the available table column width. I have the column width information in pixels. Now I would like to convert this measure to the number of characters, so I can shorten the text to the specified number.

I doesn't have to be 100% correct, a near assumption will also work.

Answer 1

The CSS property that he is talking about is "text-overflow".

Try adding the following to you element's class, all are required:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Answer 2

Wrap your text in the cell in a DIV. This will tell you whether the text inside the DIV is larger than the cell:

<div id='test' style='width:200px;height:100px;overflow:hidden'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
<script type="text/javascript">
alert($('test').scrollHeight)
</script>

If you wanted to truncate at the end of a word, and add an ellipsis (...) you could, in script, start removing words until the height is equal to or less than the container. (I'm using Protoype for the $ shortcut)

Here is a working example:

<div id='test' style='width:300px;height:100px;overflow:hidden'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>
<script type="text/javascript">
function shorten(element) { 
    if($(element).scrollHeight>$(element).getHeight()) {
        var myText = $(element).innerHTML.split(" ")
        myText.length=myText.length-2
        $(element).update(myText.join(" ")+" ...")
        window.setTimeout('shorten("'+element+'")',1)
    }

}
shorten('test')
</script>

You could do with sentences by splitting on a period, instead of a space, but you'd need a fall-back if no period was found, or if what was left over after the truncation is too short.

Answer 3

I am using jquery 1.4.2 and the earlier answer did not solve the problem but helped.. here is the code with some minor adjustments. remember that the container needs a fixed height and overflow hidden.

p#descr1 { height:46px; overflow:hidden; }

<script type="text/javascript">

    function shorten(element) {
        if ($(element).attr('scrollHeight') > $(element).height()) {
            var myText = $(element).text().split(" ")
            myText.length = myText.length - 2
            $(element).html(myText.join(" ") + " ...")
            window.setTimeout('shorten("' + element + '")', 1)
        }
    }

    $(document).ready(function () {
        shorten('#descr1'); // the id of the container

    });

</script>

Answer 4

This is for the web? If so, why not use a simpler method like using css to hide the overflow?