inline text contained within a grid item will not truncate with an ellipsis

Question

I can't seem to get the ellipsis to display. The text just wraps to the next line.

text {
   display: inline;
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
}

grid {
   width: 200px;
   height: 3em;
   border: 1px solid #000000ff;
   display: grid;
   grid-template-columns: 1fr;
}

<grid><text>This text should display an ellipsis instead of wrapping!</text></grid>

you forget `white-space:nowrap` – Temani Afif Jul 18 '19 at 12:04 — Temani Afif, Jul 18 '19 at 12:04

score 1 · Accepted Answer · answered Jul 18 '19 at 12:04

add white-space: nowrap;to text

text {
   display: inline;
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
}

grid {
   width: 200px;
   height: 3em;
   border: 1px solid #000000ff;
   display: grid;
   grid-template-columns: 1fr;
}

<grid><text>This text should display an ellipsis instead of wrapping!</text></grid>

score 1 · Answer 2 · answered Jul 18 '19 at 12:04

Please apply css for nowrap to the text, as following:

text {
       display: inline;
       overflow: hidden;
       text-align: center;
       white-space: nowrap;
       text-overflow: ellipsis;
    }
    
    grid {
       width: 200px;
       height: 3em;
       border: 1px solid #000000ff;
       display: grid;
       grid-template-columns: 1fr;
    }

<grid><text>This text should display an ellipsis instead of wrapping!</text></grid>

inline text contained within a grid item will not truncate with an ellipsis

2 Answers2