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 ha

Answer 1

An interesting property to show/hide part of the text that it is standard in CSS is text-overflow. No JS is required. The width of the text (200px in the example of the snippet below) correspond to the "clip" of the text you want to be shown by default.

div {
  width: 100%; 
}

div.autoShowHide {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
}

div.autoShowHide:hover {
  white-space: normal; 
  overflow: visible;
  width: 100%; 
}

<p>Go over the text to see the full text:</p>

<div class="autoShowHide">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.</div>

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 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 4

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>