Cut long text to fit width in pixels

Question

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

I should not be 100% correct, an approximate guess will also apply.

Answer 1

Wrap your text in a cell in a DIV. This will tell you if the text inside the DIV will be 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>

(...), script , . ( Protoype $shortcut)

:

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

, , , , , , .

Answer 2

CSS, , " ".

element, :

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

Answer 3

jquery 1.4.2, , .. . , .

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

Is it for the internet? If so, why not use a simpler method like using css to hide overflow?