Hide some text html, css, javascript

Question

How to hide part of text inside div or span ?

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

I should have the full text inside the div , span , as in the javascript search.

Answer 1

You will need javascript to create a range around the last 120 characters that hide them. There is a CSS visibility: hidden attribute that can be applied to a range.

Something like this should be the result of:

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

Answer 2

You can use the simple css property for your element "text-overflow: ellipsis;" To use this property effectively, you also need to apply some related properties.

Example:

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

* Tested in Chrome.

Answer 3

If you want to crop the div to a specific size, rather than the exact number of characters, you can simply specify the div you want and specify overflow: hidden to copy content that doesn't fit.

If you make sure that the height of the div is the set of line heights of the text, you will not have the content trimmed in the (vertical) middle of the line.