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

Question

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

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

Answer 1

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

Answer 2

Оберните свой текст в ячейку в 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> 

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

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

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

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

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