Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:
I like big butts and I cann
cutting off the text. Is it possible to display this like this:
I like big butts and I cann...
using CSS?
Hide text on load and show on hover
.hide-text {
width: 70px;
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
span:hover {
white-space: unset;
text-overflow: unset;
}<span class="hide-text"> How to hide text by dots and show text on hover</span>You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.
Here's a demo on jsbin.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}<div class="cut-text">
I like big butts and I can not lie.
</div>Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.
Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Check the following snippet for your problem
div{_x000D_
width : 100px;_x000D_
overflow:hidden;_x000D_
display:inline-block;_x000D_
text-overflow: ellipsis;_x000D_
white-space: nowrap;_x000D_
}<div>_x000D_
The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P_x000D_
</div>Hide text on load and show on hover
.hide-text {
width: 70px;
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
span:hover {
white-space: unset;
text-overflow: unset;
}<span class="hide-text"> How to hide text by dots and show text on hover</span>You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.
Here's a demo on jsbin.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}<div class="cut-text">
I like big butts and I can not lie.
</div><!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* after 3 line show ... */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
<div class="cardDetaileclips">
My Name is Manoj and pleasure to help you.
</div>
</div>
</body>
</html>
<style>
.dots
{
display: inline-block;
width: 325px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
</style>
Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.
Most of solutions use static width here. But it can be sometimes wrong for some reasons.
Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).
HTML:
<table style="width: 100%">
<tr>
<td style="width: 60px;">narrow</td>
<td>
<span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
dynamic column can have really long text which can be wrapped on two rows
but we just need not wrapped texts using as much space as possible
</span>
</td>
</tr>
</table>
CSS:
.cutwrap {
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 18px;
white-space: normal;
color: transparent !important;
}
.cutwrap::selection {
color: transparent !important;
}
.cutwrap:before {
content: attr(data-cutwrap);
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
}
/* different styles for links */
a.cutwrap:before {
text-decoration: underline;
color: #05c;
}
You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.
Here's a demo on jsbin.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}<div class="cut-text">
I like big butts and I can not lie.
</div><style>
.dots
{
display: inline-block;
width: 325px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
</style>
Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.
Here's a demo on jsbin.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}<div class="cut-text">
I like big butts and I can not lie.
</div>In bootstrap 4, you can add a .text-truncate class to truncate the text with an ellipsis.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>_x000D_
_x000D_
<!-- Inline level -->_x000D_
<span class="d-inline-block text-truncate" style="max-width: 190px;">_x000D_
I like big butts and I cannot lie_x000D_
</span><!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* after 3 line show ... */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
<div class="cardDetaileclips">
My Name is Manoj and pleasure to help you.
</div>
</div>
</body>
</html>
Hopefully it's helpful for you:
.text-with-dots {_x000D_
display: block;_x000D_
max-width: 98%;_x000D_
white-space: nowrap;_x000D_
overflow: hidden !important;_x000D_
text-overflow: ellipsis;_x000D_
}<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.
Most of solutions use static width here. But it can be sometimes wrong for some reasons.
Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).
HTML:
<table style="width: 100%">
<tr>
<td style="width: 60px;">narrow</td>
<td>
<span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
dynamic column can have really long text which can be wrapped on two rows
but we just need not wrapped texts using as much space as possible
</span>
</td>
</tr>
</table>
CSS:
.cutwrap {
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 18px;
white-space: normal;
color: transparent !important;
}
.cutwrap::selection {
color: transparent !important;
}
.cutwrap:before {
content: attr(data-cutwrap);
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
}
/* different styles for links */
a.cutwrap:before {
text-decoration: underline;
color: #05c;
}
Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.
Hopefully it's helpful for you:
.text-with-dots {_x000D_
display: block;_x000D_
max-width: 98%;_x000D_
white-space: nowrap;_x000D_
overflow: hidden !important;_x000D_
text-overflow: ellipsis;_x000D_
}<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>In bootstrap 4, you can add a .text-truncate class to truncate the text with an ellipsis.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>_x000D_
_x000D_
<!-- Inline level -->_x000D_
<span class="d-inline-block text-truncate" style="max-width: 190px;">_x000D_
I like big butts and I cannot lie_x000D_
</span>Source: Stackoverflow.com