CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Plic Pl
Plic Pl

Reputation: 541

Find out when text is over contenteditable div

I want to find out, when my text goes over the content editable div.

I dont want to have a scroll or anything, just as it is.

What I want is to block (not hiding with overflow, blocking!!) any text which goes below the div.

Here is my JSFiddle with my problem.

http://jsfiddle.net/N4tTp/1/

Thanks in advance.

Upvotes: 0

Views: 596

Answers (2)

jas
jas

Reputation: 33

<html>
<head>
<style>
    div.block{margin:20px;width:400px;height:100px;overflow:hidden;}
 //defined some style just for demonstration
</style>
<body>
    <div  class="block" contenteditable="true" onkeyup="ManageOverflow(event)">
    Block Content
    </div>  
</body>
<script>
function ManageOverflow(event){
    if(event.target.scrollHeight > event.target.clientHeight){
        //your action here
    }
}

</script>
</html>

Upvotes: 2

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

As other's are saying, you can use text-overflow: ellipsis, but unfortunately, this will only work with one line (not multi lines)

example

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

If you want multi-lines, you won't get an ellipsis

overflow: hidden;

multiline example without ellipsis

Upvotes: 0

Related Questions