根据像素的宽度缩短长文本

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;