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.

score 17 · Answer 1 · answered Jun 11 '14 at 07:07

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.

score 8 · Accepted Answer · answered Mar 14 '12 at 10:28

8

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>

answered Mar 14 '12 at 10:28

Tarion

16,283
13
71
107

3

This begs the question: "How do I find the first 40 characters?"... (assuming this isn't static HTML) – Wesley Murch Mar 14 '12 at 10:37
@Madmartigan If it isn't static HTML, you could add the span when generating the page on the server. Shouldn't be too hard in PHP or ASP. Easy with JQuery as well. – GolezTrol Mar 14 '12 at 11:02

score 5 · Answer 3 · answered Mar 14 '12 at 10:34

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.

score 4 · Answer 4 · answered Mar 07 '20 at 13:55

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>

hide part of the text html, css, javascript

4 Answers4

Linked