7

我的页面上有以下内容 DIV，它显示动态文本：

<div id="someContent">
</div>

它使用以下 CSS 来截断额外的文本：

#someContent {
    height: 200px;
    width: 200px;
    overflow: hidden;
}

如果我将此文本加载到 DIV 中：

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rut​​rum, erat nulla balloon diam, at nonummy quam ante ac quam. Maecenas urna purus, 发酵 id, molestie in, commodo porttitor, felis. Nam blandit quam ut "

... CSS 仅导致以下文本显示在 DIV 中：

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rut​​rum, erat nulla balloon diam, at nonummy quam ante ac quam. Maecenas urna purus, 发酵 id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue"

这按预期工作。

但是，我想知道是否有某种方法可以使用 JavaScript 访问显示的文本。当我尝试访问innerHTMLDIV 的属性时，它会返回最初加载到 DIV 中的整个文本。

<script type="text/javascript">
    alert(document.getElementById("mainArticleContent").innerHTML);
</script>

我的最终目标是用省略号（“...”）替换修剪后的内容中的最后一个单词。我想我可以在 JavaScript 中做到这一点，这样它就会显示在所有浏览器中，而不仅仅是 IE，就像 CSS property 一样text-overflow: hidden。

有任何想法吗？这可能吗？

4

7 回答 7

3

我认为您要求做的事情不可能使用 javascript。

或者，为什么不在服务器端截断特定字符数的文本？根据您选择的字体，您可能无法控制页面上显示的 div 的大小，但它应该可以解决您的问题。

编辑：

看一下这个以获得自动 CSS 省略号。有一些注意事项，它看起来非常特定于浏览器，但这是做你想做的另一种方法。

于 2009-04-22T14:07:37.887 回答
2

这是使用 jQuery 的快速思考：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var innerText = $('#someContent').text();
    var textArray = innerText.split('');
    var formatted = '';
    for(var i in textArray) {
        formatted += '<span>' + textArray[i] + '</span>';
    }
    var heightOfContainer = $('#someContent').height();
    $('#someContent').html(formatted);
    var clipped = '';
    $('#someContent span').each(function(){
        if ($(this).position().top < heightOfContainer) {
            clipped += $(this).text();
        } else {
            return false;
        }
    });
    clipped += '...';
    $('#someContent').html(clipped);
});
</script>
于 2009-04-22T14:37:55.363 回答
2

该站点解释了一种可能对获取显示的文本部分有用的技术。我不确定这种方法有多准确，但我怀疑它会让你非常接近你想要的： http ://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with -dots-via-javascript

于 2009-04-22T14:16:19.143 回答
1

没有简单的方法可以做到这一点。您必须根据 div 大小、字体大小、字体类型和 div 内的文本偏移量来计算在 DIV 中可以看到多少文本。请记住，您可以使用负偏移量来显示文本的不同部分。

您应该能够根据所有这些数字计算出 DIV 可以容纳多少文本的算法，但是由于换行，这有点棘手。

于 2009-04-22T14:17:55.520 回答
1

无需使用 Javascript 即可获得省略号。您可以简单地使用 CSStext-overflow属性并将其值设置为“省略号”。您可以在此处查看文档。

如果您想在多行之后拥有它，请告知本指南。

于 2017-08-08T13:21:13.797 回答
0

您可以根据客户端的字符数进行相同的截断。将截断的部分存储在其他 DOM 元素中（或者如果您不介意这种事情，也可以使用您自己的属性）。让整个事情在 body.onLoad() 上启动。

于 2009-04-22T14:18:45.330 回答
0

如果这只是为了显示目的，那么您可以简单地在容器的右下角有一个绝对定位的 div，其中包含“...”，因此在文本的顶部。

于 2013-01-30T22:46:51.413 回答