Question

我在html中搜索文本溢出的解决方案。在我的项目中，我使用的是angularjs，所以基本上我试图制定一个指令而没有任何成功。

例如，假设我有以下html标记：

<div style="height=10px;witdh=5px"> text text
sLorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis quis iaculis tellus, et feugiat orci. Interdum et malesuada 
fames ac ante ipsum primis in faucibus. Vestibulum id condimentum neque. Vivamus nec 
bibendum tortor. Donec mi sapien, rutrum sit amet sagittis eu, consectetur non lectus.   
Cras vitae porttitor assa. Phasellus odio mauris, placerat in luctus nec, malesuada et     
mauris. Donec neque dui, gravida sit amet iaculis vitae, ultrices a enim. Sed mi mauris, 
pharetra eget facilisis id, vestibulum laoreet quam. Etiam interdum nisi non massa 
pellentesque 
</div>

我希望从innerHTML文本中获取一些文本然后3点，例如......如果有高度溢出

Answer 1

要为您的<div>完成此操作，您需要以下内容：

height: 10px;
width: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

稍微不同的是，您的内联CSS不正确。 CSS属性 - 值对由冒号分隔，如下所示：

<div style="height: 10px, width: 5px, white-space: nowrap, overflow: hidden, text-overflow: ellipsis;">

Answer 2

这是我刚写完的快速片段。

JSFiddle

这允许使用框的宽度和高度进行多行省略号检查，并继续删除字符，直到内容适合框内。

$(function(){

    $(".overflow-box").each(function(){

        $("body").append("<div class='overflow-hidden'/>");
        $(".overflow-hidden").css("width", $(this).width()+"px");

        var i = $(this).html().length;
        while($(".overflow-hidden").html($(this).html().substring(0, i--)+"...").height() > $(this).height())
        {}

        $(this).html($(".overflow-hidden").html());
        $(".overflow-hidden").remove();

    });

});

文本在html标记内溢出

2 个答案:

JSFiddle