html标签内的文本溢出

Question

I am searching for a solution for text overflow inside a html. in my project I am using angularjs, so basicly I tried to make a directive without any success.

for example lets say i have the following html tag:

<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>

i am looking to get some text from the innerHTML text and then 3 point such as ... if there is a height overflow

Answer 1

To accomplish this for your <div> above you'll need the following:

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

On a slightly different note, your inline CSS is incorrect. CSS property-value pairs are separated by a colon like so:

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

Answer 2

Here's a quick snippet I just wrote up.

JSFiddle

---

This allows for multi-line ellipsis checking by using the width and height of the box and continuing to remove characters until the contents fit inside the box.

$(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();

    });

});