anson920520 anson920520 - 6 months ago 11
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

<p>
tag.

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


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.

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

Answer

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;