代码之家 › 专栏 › 技术社区 › Eric Belair

使用CSS样式overflow:hidden时,如何访问DIV中显示的实际文本?

overflow html text css javascript

Eric Belair · 技术社区 · 16 年前

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

它使用以下CSS来剪切其他文本:

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

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

非夏天的码头。Maecenas urna purus,发酵液id, 莫莱斯蒂进来了,康莫多·波特托,菲利斯。南布兰迪特广场。奥纳雷·里索斯·里古拉。奥古斯河三角洲调味品。埃涅亚射手座。埃蒂亚姆·利奥·佩德,朗卡斯非夏季车辆。可能的悬钩子。”

…CSS仅在DIV中显示以下文本:

“Lorem ipsum door sit amet,杰出的领导者。Praesent aliquam,justo convallis luctus rutrum,erat nulla酵素直径,在莫莱斯蒂进来了,康莫多·波特托,菲利斯。南布兰迪特广场。奥纳雷·里索斯·里古拉。Phasellus tristique purus a augue“

innerHTML 属性,它返回最初加载到DIV中的整个文本。

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

我的最终目标是替换最后一个单词修剪内容以省略号(“…”)表示。我想我可以在JavaScript中实现这一点,这样它就可以在所有浏览器中显示,而不仅仅是IE,就像CSS属性一样 text-overflow: hidden

有什么想法吗?这可能吗?

7 回复 | 直到 5 年前

Dave L 16 年前

我不认为你所要求的是用javascript做得到的。

编辑:

看看 this 获取自动CSS省略号。这里有一些注意事项,它看起来非常特定于浏览器,但这是另一种做你想做的事情的方法。

kbosak 16 年前

本网站介绍了一种可能有助于获取文本显示部分的技术。我不确定这个方法有多准确,但我怀疑它会让你非常接近你想要的: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

Jerph 16 年前

下面是使用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>

Maiku Mori 16 年前

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

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

Dimitris Damilos 7 年前

text-overflow 属性,并将其值设置为“省略号”。你看到了吗 documentation here .

如果你想在多行之后得到它,那么 advise this guide .

Damo 16 年前

您可以根据客户端的字符数执行相同的截断。将被截断的部分存储在其他DOM元素中(如果您不介意的话,也可以存储您自己的属性)。将整个过程设置为在body.onLoad()上启动。

Paul C. Shirley 12 年前