How do I set text-overflow to ellipsis in CSS grid layout?

Question

I have a grid layout like the one in header below. There is a text in the div whose width is 1fr. I want the text inside that div to be truncated when it is too long. Adding text-overflow as ellpsis is not working. Any idea how to do it?

It has to be grid and there is no way I can change that.

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  text-overflow: ellipsis;
}

<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>

add this property to .long { white-space: nowrap;overflow:hidden;text-overflow:elipses;} hope this works here is a reference link https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ — Chandra Shekhar, Jun 08 '17 at 08:43
@Michael_B this seems unique to me and is not a duplicate, OP is asking about truncation to a single line using CSS Grid, a different beast than the multi-line non-grid solution in the linked duplicate question — Lounge9, Dec 08 '17 at 00:41
@Lounge9, It's not really the question that matters. It's the answers. And this question has a complete answer in the duplicate. (Hence, the note above states: **This question already has an answer here**). — Michael Benjamin, Dec 08 '17 at 00:44
First of all as an observer of this post I would like to mention that this question is definitely not a duplicate since the context is with css-grid which is very specific. Having had this problem myself adding this to grid : `grid-template-columns: repeat(2,minmax(0, 1fr));` and in my case it was a heading of h2 instead of your div with text in it that I added this: `overflow: hidden` and `text-overflow: ellipsis` and `white-space: nowrap` — Timothy, Jan 18 '22 at 10:57
@MichaelBenjamin, the duplicate question does not mention anything about grid layout, which is the tricky part. — Fernando, May 19 '22 at 13:41

score 23 · Accepted Answer · edited Mar 24 '21 at 18:53

23

change .long css to below

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

the reason why you need to add white-space and overflow is below:

you need white-space: nowrap to tell browsers to not wrap when text length exceed containing block width, white-space properties default value is normal, which indicates it can wrap, so it won't exist the situation where text overflow;
overflow default value is visible, when text exceeds containing block, it just display, so there is no need to overflow text to display, only if you set overflow to hidden. Then, when text can not fully displayed, it will use text-overflow property.

edited Mar 24 '21 at 18:53

altso

2,181
4
24
40

answered Jun 08 '17 at 10:12

Luckness

403
2
4

50

This one doesnt work for me. When using FR-units in a gridlayout it seems it just expands the box. Or am I doing something wrong? Usually the above code works, but first time Ive tried in a grid layout. – Morten Hjort Jul 08 '17 at 17:55
Isn't this basically the same answer Ehsan gave? – Isaac Pak Nov 10 '17 at 17:50
3

This doesn't answer the original question where the text is inside a container that is an element of a css grid. – aUXcoder Apr 06 '18 at 20:07
2

This doesn't fully answer the question of truncating text in the context of CSS Grid Layout. When I added `max-width: 100%`, it started working for me. – james Apr 11 '18 at 19:42
@MortenHjort To make it work in a grid layout, wrap `.long` in a `div` which becomes the column with FR-unit `1fr` and set `overflow: hidden` on this new `div`. – tonix Jun 07 '19 at 13:01
29

@MortenHjort add a `minmax` in your grid definition, like so: `grid-template-columns: minmax(0, 1fr)`. See https://css-tricks.com/preventing-a-grid-blowout/ – e18r Oct 22 '19 at 09:23
4

@e18r - perfect, that worked like a charm! – jwld Dec 12 '19 at 10:53
2

@MortenHjort add `min-width: 0` to your grid items, that should work. – Vishwas Singh Chouhan Jul 21 '20 at 04:31
2

Just as @e18r said, wrapping the `fr` value in `minmax` worked. – Ramtin Jan 30 '21 at 07:40
1

I agree with @MortenHjort In my case removing display: flex from the child in grid works for me with the above solution. – Pascal Apr 27 '21 at 15:17

Minal Chauhan · Answer 2 · 2017-06-08T08:53:49.003

Add overflow: hidden and white-space: nowrap when you used text-overflow

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

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

<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>

This is the trick that works in Chrome, but FireFox (currently v57) seems to not handle truncation very well, especially with CSS grid. The `.long` element just pushes the `.container` wider. — Lounge9, Dec 08 '17 at 05:29

Ehsan · Answer 3 · 2017-06-08T08:55:02.373

1

1) when use text-overflow: ellipsis; must use overflow: hidden; too.

2)white-space: nowrap; Does not allow text break in new line.

So, Change Like This :

.long {
  text-overflow: ellipsis;
  overflow: hidden;/*/<------------new/*/
  white-space: nowrap;/*/<---------new/*/
}

edited Jun 08 '17 at 08:55

answered Jun 08 '17 at 08:47

Ehsan

12,231
3
23
42

score -1 · Answer 4 · answered Jun 08 '17 at 08:47

-1

Define a height, set white-space to nowrap and overflow: hidden

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>

answered Jun 08 '17 at 08:47

dennispreston

576
4
14

3

To have ellipsis text inside a grid item you need `min-height: 0`on the container. Check https://dev.to/timhecker/grid-cell-issue-with-white-space-nowrap--text-overflow-ellipsis-52g6 – pauldcomanici Jun 06 '19 at 08:38
It works in the code snippet... Not sure why I've got -1 on my comment when people who gave exactly the same answer after me have got upvoted answers... – dennispreston Jun 12 '19 at 14:51
1

@darkyndy You meant `min-width: 0`. Good solution though. It's the only solution that actually solves the issue without having to specify a fixed width in pixels, which would utterly defeat the purpose of CSS Grid! – Alex Walker Feb 27 '20 at 11:01

How do I set text-overflow to ellipsis in CSS grid layout?

4 Answers4