使用javascript捕获溢出文本高度

我在css中使用了overflow:hidden属性，这使得文本在离开容器时被隐藏

任何人都可以让我知道，如果有一种方法来捕获整个文本的高度，包括溢出文本

---

还有。height（）值只是返回容器的高度，而不是溢出文本？

使用

scrollHeight

，请参阅

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'));

});

---

如果您想正确显示文本，可以使用style={wordBreak:“break all”}包含一个jsfiddle吗？虽然我理解为什么这样做有效，但对于原始海报来说，解释一下为什么这样做会更好

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

});

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

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

.real{
    width:300px;
}

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