anson920520 anson920520 - 1 year ago 32
HTML Question

Using HTML/CSS to limit the length of the sentences

I am calling few sentences from a JSON file and append it in a


Thank you all for another magical night spent together
this last sunday at The Hippodrome in Baltimore.Thank yo...

And i'd like to shorter it, even it's already been shorten in the json, am i able to use pure css or html to limit it's length?

I don't need any javascript/Jquery suggestion because if comes to javascirpt it's easy to accomplish this task, i might just play with dom, but in this case i want to see if there's any pure html and css method can do this.

Everyone suggest me to convert the sentences in to one single line using
white-space: nowrap
and then hidden text by setting
but there's a limitation, the html can just display single line. Is there anyway to display another line?


If you are single line, use text-overflow:ellipsis attributes to achieve a single line of text to display an ellipsis (overflow ). Of course, some browsers also need to add width attributes.

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

If it is a multi line, use WebKit CSS extended attribute (WebKit is private property) -webkit-line-clamp;. Attention: WebKit browser or mobile terminal (the majority is a WebKit based browser) page are easy to be implemented in the: This is a non-standard attribute (unsupported WebKit property) the, it does not appear in the draft of the CSS specification. -webkit-line-clamp is used to limit the number of rows in a text displayed by a block element. In order to achieve this effect, it needs to be combined with other WebKit attributes. Common binding properties:

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;