首页 文章

使用CSS样式溢出时，如何访问DIV中显示的实际文本：隐藏？

提问于
浏览 次
4

我的页面上有以下内容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 rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti."

... CSS只会在DIV中显示以下文本：

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

这按预期工作 .

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

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

我的最终目标是用省略号（"..."）替换修剪内容中的最后一个单词 . 我想我可以在JavaScript中执行此操作，以便它将显示在所有浏览器中，而不仅仅是IE，与CSS属性 text-overflow: hidden 一样 .

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

javascript css text html overflow

7 回答

  • 0

    该站点解释了一种可用于获取文本显示部分的技术 . 我'm not sure how accurate this method would be, but I suspect it' d让你非常接近你想要的：http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

    回复于
  • 0

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

    你应该能够找出algorythm来计算DIV可以根据所有这些数字保存多少文本，但由于线条包裹它有点棘手 .

    回复于
  • 1

    我不认为你要求用javascript做什么 .

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

    编辑：

    看一下this以获得自动CSS省略号 . 有一些警告，它看起来很漂亮的浏览器，但这是另一种做你想要的方法 .

    回复于
  • 1

    以下是使用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>
    回复于
  • 2

    没有必要使用Javascript来获得省略号 . 您只需使用CSS text-overflow 属性并将其值设置为"ellipsis"即可 . 你看到documentation here .

    如果你想在多行之后拥有它，那么advise this guide .

    回复于
  • 3

    您可以根据客户端的字符数进行相同的截断 . 将截断的部分存储在其他DOM元素中（如果你不介意那种东西，则存储你自己的属性） . 让整个事情开始在body.onLoad（）上开始 .

    回复于
  • 1

    如果这仅仅是为了显示目的，那么你可以简单地在容器的右下角放置一个带有“...”的绝对定位的div，所以在文本的顶部 .

    回复于

相关问题