Overflow:hidden dots at the end
Overflow:hidden dots at the end
Question
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?
Popular Answer
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 buts and I can not lie.
</div>Read more... Read less...
Check the following snippet for your problem
div{
width : 100px;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}<div>
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
</div>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;
}
Hopefully it's helpful for you:
.text-with-dots {
display: block;
max-width: 98%;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}<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.
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>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
I like big butts and I cannot lie
</span>