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

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

29

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,311
4
26
40

answered Jun 08 '17 at 10:12

Luckness

481
3
4

60

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
6

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
5

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
42

@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
4

@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
2

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
@e18r You should write a solution, because only this works!! Been looking for hours. – e-motiv Feb 27 '23 at 18:03
@e-motiv please feel free to write it yourself. I wrote this 3.5 years ago, so I don't remember a thing. It'd be irresponsible to write anything at this point. You, on the other hand, have it fresh in your mind and your technique is up-to-date. – e18r Feb 28 '23 at 22:02

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,655
3
25
44

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

596
4
14

6

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