CSS text ellipsis and 100 percent width

Question

I have the following container of text:

<div class="cardTitles">

<div class="title">
    <div class="titleContent">
        <i class="fa fa-star-o"></i>
        <b>Some long long long title here</b>
        <a href="some href"></a>
    </div>
</div>

... title divs ...

</div>

css:

.cardTitles {
    width: 100%;
    height: 100%;
}

.title
{
    position: relative;

    padding-top: 8px;
    padding-bottom: 8px;
}

I want to make text full width + text-overflow: ellipsis. So when I resize browser all title divs should be full 100% width of the parent cardTitles with cut text to three dots at the end.

I found that this is possible using flex. Here is the possible answer:

.parent-div {
    display: flex;
}

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

    min-width: 0;
}

But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.

You can find an example here: http://88.198.106.150/tips/cpp/

Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.

Nice! Cool trick thankyou, even works in a flexible width table, fantastic. — Maurice, Jun 23 '22 at 01:58

score 26 · Accepted Answer · edited Nov 03 '18 at 23:11

26

Try this out:

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

Here's and updated jsFiddle

edited Nov 03 '18 at 23:11

KyleMit

30,350
66
462
664

answered Dec 05 '14 at 11:26

Aakash

1,751
1
14
21

There is title with text: 'What does it mean that a reference must refer to an object, not a dereferenced NULL pointer'. Try to resize browser and you will see the result – Max Frai Dec 05 '14 at 11:57
You have to apply the ellipsis property on the anchor tag – Aakash Dec 05 '14 at 12:24
It didn't help me :( When I just leave text inside `titleContent` it doesn't work anyway. – Max Frai Dec 05 '14 at 14:41
A bit old but still: Can you make it work here for example? https://jsfiddle.net/k9ew7ry2/17/ The text with the red background ... It won't work with columns/column-count setting on one of the parents .. – trainoasis Feb 28 '18 at 11:08
Change the display of .item to block. Seems to work. https://jsfiddle.net/k9ew7ry2/29/ – Aakash Mar 05 '18 at 10:03
Unfortunately, this does not appear to work when you put it within a flexbox :( – Frank Fajardo Jul 03 '20 at 11:20
@FrankFajardo It does work within a flexbox. http://jsfiddle.net/97rh1dfx/ – Aakash Jul 28 '20 at 05:00
Thank you so much – Anas Latique Jan 18 '22 at 14:36
If the item at the end (in this case the a tag) has content and the middle text is very very long, the a tag will overflow and not be vissible. – Mareș Ștefan Aug 18 '22 at 09:33

score 24 · Answer 2 · answered Feb 19 '19 at 10:16

No Flex but could work also ... try it.

.element {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.truncate {
  display: table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

text-overflow ellipsis with 100% width

score 7 · Answer 3 · answered Oct 26 '15 at 10:20

7

The width needs to be added in pixels, percentage wont work along with other three properties as given below:-

.text-ellipsis{
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

answered Oct 26 '15 at 10:20

Nitesh

1,241
4
16
25

14

That's unfortunately. Kind of kills responsive design. :( – user959690 Feb 14 '17 at 22:34
1

@user959690 You can use `max-width: calc(100%);` for responsive design. – Ron Feb 08 '19 at 09:48
9

@Ron that doesn't do anything useful – ESR Jan 27 '20 at 13:10

score 1 · Answer 4 · answered Dec 05 '14 at 11:31

#div1 {
   white-space: nowrap; 
   width: 12em; 
   overflow: hidden;
   text-overflow: clip; 
   border: 1px solid #000000;
}

 #div2 {
   white-space: nowrap; 
   width: 12em; 
   overflow: hidden;
   text-overflow: ellipsis; 
   border: 1px solid #000000;
}

The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.

This div uses "text-overflow:clip":

This is some long text that will not fit in the box

This div uses "text-overflow:ellipsis":

This is some long text that will not fit in the box

CSS text ellipsis and 100 percent width

4 Answers4

Linked