capture overflow text height using javascript

Question

i am using overflow:hidden property in the css which makes the text to be hidden when it goes outside the container.

can any one please let me know if there is a way to capture the height of the whole text including the overflow text

as well. height() value is just returning me the height of the container and not the overflow text ?

If you want to show text correctly use style={wordBreak: "break-all"} — Aryan
– Aryan, Commented Jun 23, 2014 at 20:01

Kristoffer Jälén · Accepted Answer · 2014-06-23 20:01:01Z

3

Use scrollHeight, see documentation.

$('#id')[0].scrollHeight

answered Jun 23, 2014 at 20:01

Kristoffer Jälén

4,8664 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CMPS · Accepted Answer · 2014-06-23 20:03:17Z

0

Live demo

JQuery

$('document').ready(function(){
    $("#info").text("Width of real text: "+$('.real').css('width'));
    $("#info").html($("#info").html() + "<br/>Height of real text: "+$('.real').css('height'));

});

HTML

<div class="overflow">
    <div class="real">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non justo eget eros accumsan mattis. In a auctor magna, sit amet dapibus sapien. Mauris lectus justo, ornare eu pretium in, fringilla nec risus. Phasellus at risus dapibus, imperdiet tellus lacinia, feugiat risus. Nullam ultrices luctus ante, id aliquet eros. In iaculis elit ut hendrerit facilisis. Cras tristique non orci non sodales. Aliquam semper libero sed diam venenatis, imperdiet rhoncus augue eleifend. Nullam euismod mauris neque, ac semper erat posuere a. Nam a tortor commodo, adipiscing nisl vel, sollicitudin nisl. Suspendisse adipiscing laoreet neque sit amet tempor. 
    </div>
</div>

<div id="info"></div>

CSS

.overflow{
    width:200px;
    height:100px;
    overflow:hidden;
}

.real{
    width:300px;
}

#info{
    background-color:gray;
    margin-top:15px;
}

answered Jun 23, 2014 at 20:03

CMPS

7,7874 gold badges32 silver badges53 bronze badges

1 Comment

tomysshadow Over a year ago

While I understand why this is working, some explanation as to why this works would be nice for the original poster

Collectives™ on Stack Overflow

capture overflow text height using javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related