387

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?

4
  • 93
    Is this question a ruse to promote the song? Commented Jan 28, 2009 at 6:43
  • 38
    @CyrilGupta Sorry for the late response. I had to run to the bathroom. To answer your question... Yes Commented Apr 2, 2014 at 5:00
  • 1
    Possible duplicate of How can I show dots ("...") in a span with hidden overflow?
    – Termininja
    Commented Nov 10, 2016 at 13:38
  • 11
    I don't think that's a duplicate, there are no butts involved in that one.
    – enobayram
    Commented Dec 8, 2022 at 7:55

11 Answers 11

544

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>

11
  • This seemed to work in Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
    – Jace
    Commented Nov 12, 2012 at 7:47
  • Yes, it appears to work in newer versions. Obviously this answer is a few years old at this point. Commented Nov 12, 2012 at 14:27
  • Firefox started to support this as of version 7, which was released in the latter half of 2011.
    – Richard Ev
    Commented Dec 28, 2012 at 16:55
  • 2
    I can use my common sense to tell that this answer is "right" based on the votes and comments. However, I fail to see in reality how this answer is "right". I used both overflow: hidden; and text-overflow: ellipsis; in a <p> element (i.e., a block element) and found no ... at the end (of course I am making sure that it is indeed overflowing). I also tried this without the overflow: hidden; part, and also with a <span> element inside the <p> element where the <p> element had overflow: hidden; and the <span> had text-overflow: ellipsis; No matter how I try, this is a fail..
    – VoidKing
    Commented Jul 23, 2013 at 15:54
  • 2
    Well, I think I know the problem. I am trying to restrict the overflow based on max-height so I cannot have white-space: set to nowrap
    – VoidKing
    Commented Jul 23, 2013 at 16:08
118

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>

8
  • 4
    up's for adding "white-space: nowrap;" which might be needed in some cases
    – leo
    Commented Jan 20, 2016 at 13:44
  • 3
    how to make the text to display 2 lines then disappear? Commented Sep 2, 2016 at 7:23
  • 1
    @Matian2040 you can adjust by giving fixed height and overflow hidden styles, check this fiddle jsfiddle.net/5135L4bx
    – Arjun
    Commented Sep 3, 2016 at 12:40
  • 1
    oh i see. i tried. however it seems two lines means there won't be a ... at the end? Commented Sep 21, 2016 at 1:53
  • 3
    display: inline-block; was the missing component for me. Thank you.
    – Seth
    Commented Jan 15, 2019 at 20:15
47

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;
}
3
  • apologies, Im not sure how i removed your words like that!
    – cela
    Commented May 28, 2018 at 6:16
  • works great on Chrome, but note that this will not work on Firefox
    – Ken Bigler
    Commented Dec 10, 2018 at 19:46
  • How do I do this on another browser, say Firefox? Edit: stackoverflow.com/questions/33058004/… Commented Jun 27, 2020 at 10:43
29

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>

1
25

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>

0
15

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

2
  • 3
    Browser support is pretty darn good now, as of Feb 2012. See caniuse.com/#search=text-overflow
    – Simon E.
    Commented Feb 4, 2012 at 23:51
  • 1
    Ah, you're the reason this question showed up three years later.
    – Mr Lister
    Commented Apr 7, 2012 at 7:48
12

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>

0
12
<!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>
6
<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>
6
.cut-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
3
  • 6
    Add an explanation as to why your answer is better than the 10 others
    – Zach Jensz
    Commented Jun 7, 2022 at 7:34
  • @ZachJensz Brother, Almost all other answers are also correct, but my focus is to first solve the problem and this is the code that does the actual job! no other styling, formatting, spacing. Commented Aug 23, 2022 at 10:46
  • Thanks. I didn't need the overflow: hidden; Commented Dec 26, 2022 at 12:51
5

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;
}
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.