Сократить длинный текст в соответствии с шириной в пикселях - PullRequest
Новая
       15

Сократить длинный текст в соответствии с шириной в пикселях

2 голосов
/ 05 декабря 2008

Я хотел бы сократить очень длинные описания до доступной ширины столбца таблицы. У меня есть информация о ширине столбца в пикселях. Теперь я хотел бы преобразовать эту меру в количество символов, чтобы я мог сократить текст до указанного числа.

Я не должен быть на 100% правильным, предположение также будет работать.

Ответы [ 4 ]

2 голосов
/ 14 января 2012

Свойство CSS, о котором он говорит, это «переполнение текста».

Попробуйте добавить следующее к вашему классу элемента, все обязательны: 

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2 голосов
/ 05 декабря 2008

Оберните ваш текст в ячейку в DIV. Это скажет вам, является ли текст внутри DIV больше, чем ячейка: 

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

Если вы хотите обрезать в конце слова и добавить многоточие (...), вы можете в сценарии начать удалять слова до тех пор, пока высота не станет равной или меньшей, чем контейнер. (Я использую Protoype для ярлыка $)

Вот рабочий пример: 

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

Вы могли бы делать с предложениями, разделяя точку на пробел, а не на пробел, но вам понадобился бы запасной вариант, если период не был найден или если то, что осталось после усечения, слишком короткое.

1 голос
/ 01 декабря 2010

Я использую 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>
0 голосов
/ 05 декабря 2008

Это для сети? Если так, то почему бы не использовать более простой метод, такой как css, чтобы скрыть переполнение?

...