2

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

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

4

4 回答 4

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>

您可以通过拆分句号而不是空格来处理句子，但如果没有找到句点，或者截断后剩余的内容太短，则需要回退。

于 2008-12-05T20:51:50.913 回答
2

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

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

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
于 2012-01-13T20:10:08.243 回答
1

我正在使用 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>
于 2010-12-01T15:26:24.310 回答
0

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

于 2008-12-05T20:42:13.613 回答