Using HTML/CSS to limit the length of the sentences

Question

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?

score 2 · Answer 1 · answered May 19 '16 at 07:22

CSS and HTML can't get length of the sentence. So, we don't have limit for CSS and HTML can't get length of the sentence. So, can't set limit length for the sentence. But if you want use CSS to truncate a line of the sentence with max-width of element. You can do:

p {
 max-width: 100px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

score 1 · Answer 2 · answered May 19 '16 at 07:18

1

you can use as also the link https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /*width as you want */
}

answered May 19 '16 at 07:18

Anubhav pun

1,283
2
8
19

score 1 · Answer 3 · answered May 19 '16 at 07:18

1

Use this example:

<p style="width: 150px;height: 15px;overflow: hidden;">
   Thank you all for another magical night spent together 
   this last sunday at The Hippodrome in Baltimore.Thank yo...
</p>

answered May 19 '16 at 07:18

Javid Aliyev

406
3
9

score 1 · Answer 4 · edited May 23 '17 at 12:23

You'll want to truncate the text with CSS, and by the looks of it, you want multi-line text boxes that truncate correctly at the end (the answer by Anubhav is single-line specific). Because no pure-css options exist (that I'm aware of) to handle this, you'll probably need a jQuery plugin, such as clamp.js or similar.

The answer you probably want is from another SO thread, here: https://stackoverflow.com/a/33061059/5580153

Edit: There is also a fairly intricate CSS solution here: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ although it's a bit of a hacked solution I feel.

score 1 · Answer 5 · answered May 19 '16 at 07:28

you can use text-overflow: ellipsis; instead. please read the example below.

<div id="readmore">Thank you all for another magical night spent together 
       this last sunday at The Hippodrome in Baltimore.
</div>

CSS

#readmore {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000;
}

For more info please through this reference

score 1 · Accepted Answer · edited May 19 '16 at 07:43

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;

Using HTML/CSS to limit the length of the sentences

6 Answers6