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

请为文本应用nowrap的CSS，如下所示：

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>

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

2 个答案: