Advertisement
Advertisement


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?

2018/09/06
1
221
9/6/2018 3:20:22 AM


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>

2018/02/09

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;
}
2018/05/28

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>

2019/01/15

Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.

2009/01/28

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>

2018/09/06

Source: https://stackoverflow.com/questions/486563
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]