Set the limit of text length to N lines using CSS
- Truncating text after 1 line: If you need to truncate text after 1 line then the text-overflow property of CSS can be used. It creates ellipses and gracefully cut off words.
div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
The below code demonstrates text-overflow property of CSS:<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
style
>
.text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"text"
>
Hello w3wiki. A Computer Science portal for Beginner.
It contains well written, well thought articles.
This is a paragraph containing multiple lines.
</
div
>
</
body
>
</
html
>
- Truncating text after more than 1 line: If you need to truncate text after more than 1 line then you will have to use WebKit. Webkit is the html/css rendering engine used in Apple’s Safari browser, and in Google’s Chrome.
The various problems with using WebKit are:
- WebKit is supported only in some browsers. It is supported only by Google chrome and Apple’s Safari browser and is not supported by Internet Explorer, Microsoft Edge, Firefox or Opera Mini.
- It sometimes cuts off the last letters of the word hence it does not break on only spaces.
- In WebKit there is No Alternate to Ellipsis i.e. you cannot use anything besides ellipses at the end of the truncated line.
.text{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 16px; max-height: 32px; -webkit-line-clamp: 2; /* Write the number of lines you want to be displayed */ -webkit-box-orient: vertical; }
The below code demonstrates truncating of N lines using WebKit:<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
style
>
.text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px;
max-height: 32px;
/* The number of lines to be displayed */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"text"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum.Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</
div
>
</
body
>
</
html
>
.text{ overflow: hidden; white-space: normal; height: 1.2em; /* exactly 2 lines */ text-overflow: -o-ellipsis-lastline; }
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
style
>
.text{
overflow: hidden;
white-space: normal;
/* Exactly 2 lines are displayed.
Height of 1 line is 1.2em*/
height: 2.4em;
text-overflow: -o-ellipsis-lastline;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"text"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
t enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</
div
>
</
body
>
</
html
>