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

Question

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.