包含在网格项中的内联文本不会被省略号截断

Question

我好像无法显示省略号。文本只是换行到下一行。

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>

Answer 1

将white-space: nowrap;添加到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>

Answer 2

请对正文申请css for nowrap，如下：

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

html

css

overflow