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>

如果你想截断单词的末尾，并添加省略号（...），你可以在脚本中开始删除单词，直到高度等于或小于容器。（我正在使用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 2

他所谈论的CSS属性是“文本溢出”。

尝试将以下内容添加到元素的类中，所有这些都是必需的：

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

这是针对网络的吗？如果是这样，为什么不使用更简单的方法，比如使用css来隐藏溢出？

根据宽度（以像素为单位）缩短长文本

4 个答案: