hide part of the text html, css, javascript

Question

How to hide part of the text inside div or span ?

I have a text of 160 characters but I would like to display only first 40.

I have to have the complete text inside my div, span as I do javascript searches.

Answer 1

You can use a simple css property for your element "text-overflow: ellipsis;" to use this property effectively you need to apply some related properties along with that.

For Example:

<div style="width: 50px; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;">Some text goes here</div>

*Tested in Chrome.

Answer 2

You will need some javascript to create a span arround the last 120 characters that hides them. There is a CSS attribute "visibility:hidden" that can be applied to the span.

Something like that should be the result:

<div>first 40 chars <span style="visibility:hidden">last 120 chars</span></div>