Preview

...

Code

<p> word word word <div id = "more_content"> <a onclick = "show_more_content()"> Read more </a> </div></p>

<script>
function show_more_content(){
}
</script>


Preview

The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.

This div uses "text-overflow:clip":

This is some long text that will not fit in the box

This div uses "text-overflow:ellipsis":

This is some long text that will not fit in the box

more words

Code

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="more_words"><div id="div2">This is some long text that will not fit in the box</div></div>

<a onclick="show_more_words()">more words</a>

<script>
function show_more_words() {
var x = document.getElementById("more_words");
x.innerHTML = "This is some long text that will not fit in the box";
x.style.color = "green";
}
</script>