javascript - 根据宽度(以像素为单位)缩短长文本

Question

我想将很长的描述缩短到可用的表列宽度。我有以像素为单位的列宽信息。现在我想将此度量转换为字符数，这样我就可以将文本缩短到指定的数量。

我不必 100% 正确，近似的假设也可以。

Answer 1

将文本包裹在 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>

如果您想在单词末尾 chop 并添加省略号 (...)，您可以在脚本中开始删除单词，直到高度等于或小于容器。 (我使用 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>

您可以通过按句点而不是空格来分割句子，但如果找不到句点，或者 chop 后剩下的内容太短，则需要后备。