Sometimes we need to trunk or display limited text from the long text. we can do this by using two way, by using CSS or by using javascript.
here, will discuss regarding how to trunk or display limited text from the long text by using CSS. for this text-overflow property is the most important to ellipsis text or clip text.
=> ellipsis text
The ellipsis value of the text-overflow property is used to display ... after text limit. if your text is small then it will display as it is but if the text is long as per expected then the text will display limited text with ...
EX: Demo
Output
in the above demo ... will display after limited width.
=> clip text
The clip value of the text-overflow property is used to display only text limit. if your text is small then it will display as it is but if the text is long as per expected then the text will display limited text without ...
EX: Demo
Output
in the above demo, the text only displays "The text-overflow property uisn".
From above demo, it is clear that Truncate string with ellipsis or clip using CSS is too easy as compare to javascript.
here, will discuss regarding how to trunk or display limited text from the long text by using CSS. for this text-overflow property is the most important to ellipsis text or clip text.
=> ellipsis text
The ellipsis value of the text-overflow property is used to display ... after text limit. if your text is small then it will display as it is but if the text is long as per expected then the text will display limited text with ...
EX: Demo
<!DOCTYPE html>
<html>
<head>
<style>
.limited_title {
white-space: nowrap;
width: 200px; // here, your can also use max-width : 200px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="limited_title">The text-overflow property uisng ellipsis</div>
<br/>
<div>Without using text-overflow property</div>
</body>
</html>
<html>
<head>
<style>
.limited_title {
white-space: nowrap;
width: 200px; // here, your can also use max-width : 200px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="limited_title">The text-overflow property uisng ellipsis</div>
<br/>
<div>Without using text-overflow property</div>
</body>
</html>
Output
The text-overflow property ...
Without using text-overflow property
Without using text-overflow property
in the above demo ... will display after limited width.
=> clip text
The clip value of the text-overflow property is used to display only text limit. if your text is small then it will display as it is but if the text is long as per expected then the text will display limited text without ...
EX: Demo
<!DOCTYPE html>
<html>
<head>
<style>
.limited_title {
white-space: nowrap;
width: 200px; // here, your can also use max-width : 200px;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div class="limited_title">The text-overflow property uisng ellipsis</div>
<br/>
<div>Without using text-overflow property</div>
</body>
</html>
<html>
<head>
<style>
.limited_title {
white-space: nowrap;
width: 200px; // here, your can also use max-width : 200px;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div class="limited_title">The text-overflow property uisng ellipsis</div>
<br/>
<div>Without using text-overflow property</div>
</body>
</html>
Output
The text-overflow property uisn
Without using text-overflow property
Without using text-overflow property
in the above demo, the text only displays "The text-overflow property uisn".
From above demo, it is clear that Truncate string with ellipsis or clip using CSS is too easy as compare to javascript.
No comments:
Post a Comment