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

If you want to clip the div to a certain size, rather than an exact number of characters, you can just give the div the size you want and specify overflow: hidden to clip the content that doesn't fit.

If you make sure the height of the div is a multitude of the line height of the text, you won't have the content clipped in the (vertical) middle of a line.

Answer 3

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>