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?

@CyrilGupta Sorry for the late response. I had to run to the bathroom. To answer your question... Yes — Joe Phillips, Apr 02 '14 at 05:00
Possible duplicate of [How can I show dots ("...") in a span with hidden overflow?](http://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow) — Termininja, Nov 10 '16 at 13:38
I don't think that's a duplicate, there are no butts involved in that one. — enobayram, Dec 08 '22 at 07:55

score 521 · Answer 1 · edited Jan 21 '21 at 23:55

521

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>

edited Jan 21 '21 at 23:55

Dónal

185,044
174
569
824

answered Jan 28 '09 at 05:29

Joe Phillips

49,743
32
103
159

This seemed to work in Firefox 15.0.1: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow – Jace Nov 12 '12 at 07:47
Yes, it appears to work in newer versions. Obviously this answer is a few years old at this point. – Joe Phillips Nov 12 '12 at 14:27
Firefox started to support this as of version 7, which was released in the latter half of 2011. – Richard Ev Dec 28 '12 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 `
` 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 `` element inside the `
` element where the `
` element had `overflow: hidden;` and the `` had `text-overflow: ellipsis;` No matter how I try, this is a fail..
– VoidKing Jul 23 '13 at 15:54
BTW, I tried this in Chrome, and while I am getting that this rule at least used to have compatibility issues, I would certainly expect it to work in the most recent version of Chrome as of `7/23/2013`. What am I doing wrong? This seems too easy to mess up, LOL. – VoidKing Jul 23 '13 at 15:57
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 Jul 23 '13 at 16:08
@JoePhillips is there any to place more after dots like "hi, this is s... more" when clicking on more to show the full text – Nunna Suma Mar 02 '18 at 09:19
@NunnaS No clue. Good question. Probably worthy of a separate stackoverflow question – Joe Phillips May 30 '18 at 16:20
Anyone know how to change just the 3 dots color without change the text color? – Luan Cardoso Oct 31 '18 at 18:44
@m3h0w Correct. I believe you have to specify a static width – Joe Phillips Oct 27 '20 at 15:13
in my case, I also needed to add width: 100% to the block. – mialdi98 Sep 06 '22 at 09:30

Arjun · Answer 2 · 2018-02-09T12:31:50.250

115

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>

edited Feb 09 '18 at 12:31

answered Mar 30 '15 at 12:16

Arjun

2,159
1
17
26

4

up's for adding "white-space: nowrap;" which might be needed in some cases – leo Jan 20 '16 at 13:44
3

how to make the text to display 2 lines then disappear? – MartianMartian Sep 02 '16 at 07:23
1

@Matian2040 you can adjust by giving fixed height and overflow hidden styles, check this fiddle https://jsfiddle.net/5135L4bx/ – Arjun Sep 03 '16 at 12:40
1

oh i see. i tried. however it seems two lines means there won't be a ... at the end? – MartianMartian Sep 21 '16 at 01:53
is their any solution if I want to make tow lines and in the second line these dots to be shown – Mar 05 '18 at 09:36
3

`display: inline-block;` was the missing component for me. Thank you. – Seth Jan 15 '19 at 20:15
`white-space: nowrap;` was missing for me, thank you @Arjun and @leo – Francois Bertrand Apr 24 '20 at 12:14
What specifically solved my problem: white-space: nowrap; – Ruben Alves May 18 '23 at 22:29

Nagendra Matala · Answer 3 · 2018-05-28T06:14:33.853

45

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

edited May 28 '18 at 06:14

answered May 28 '18 at 06:10

Nagendra Matala

461
4
4

apologies, Im not sure how i removed your words like that! – cela May 28 '18 at 06:16
works great on Chrome, but note that this will not work on Firefox – Ken Bigler Dec 10 '18 at 19:46
How do I do this on another browser, say Firefox? Edit: https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text?noredirect=1&lq=1 – user3187724 Jun 27 '20 at 10:43

score 29 · Answer 4 · answered Jan 15 '19 at 12:25

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>

answered Jan 15 '19 at 12:25

Vu Phan

553
6
6

1

Works like charm. Thanks. – Vigneshwaran Markandan Nov 05 '20 at 05:59

score 24 · Answer 5 · edited Feb 14 '21 at 08:46

24

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>

edited Feb 14 '21 at 08:46

coreuter

3,331
4
28
74

answered Sep 04 '19 at 10:55

Rohit Parte

3,365
26
26

score 15 · Answer 6 · answered Jan 28 '09 at 05:29

15

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

answered Jan 28 '09 at 05:29

ceejayoz

176,543
40
303
368

3

Browser support is pretty darn good now, as of Feb 2012. See http://caniuse.com/#search=text-overflow – Simon East Feb 04 '12 at 23:51
1

Ah, you're the reason this question showed up three years later. – Mr Lister Apr 07 '12 at 07:48

score 12 · Answer 7 · answered Sep 06 '18 at 02:09

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>

manoj patel · Answer 8 · 2020-04-20T04:12:25.143

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>

edited Apr 20 '20 at 04:12

answered Nov 12 '19 at 06:55

manoj patel

1,150
12
10

score 6 · Answer 9 · edited Jan 26 '17 at 06:36

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>

edited Jan 26 '17 at 06:36

radbyx

9,352
21
84
127

answered Apr 21 '15 at 09:24

Cuteboy_Max

131
1
4

score 6 · Answer 10 · answered Jun 06 '22 at 14:39

6

.cut-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

answered Jun 06 '22 at 14:39

Muhammad Taha

137
1
6

5

Add an explanation as to why your answer is better than the 10 others – Zach Jensz Jun 07 '22 at 07: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. – Muhammad Taha Aug 23 '22 at 10:46
Thanks. I didn't need the `overflow: hidden;` – Shani Kehati Dec 26 '22 at 12:51

Maju · Answer 11 · 2016-01-15T12:06:06.470

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

Related to [CSS text-overflow in a table cell?](https://stackoverflow.com/a/44452722/14928633) — kirogasa, Nov 18 '22 at 14:17

Overflow:hidden dots at the end

11 Answers11

Linked

Related