This question already has answers here:
Applying an ellipsis to multiline text
                                
                                    (25个答案)
                                
                        
                                在16天前关闭。
            
                    
尽管遵循许多人引用的here中的说明,但我无法使文本被网格中的省略号截断。

这是我的html:

<div class=grid>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</span>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</span>
</div>


而我的CSS:

.grid {
  display: grid;
  grid-template-rows: 70px 70px;
  grid-template-columns: 100%;
  margin: 12px;
}

span {
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 6px;
}

.grid, span {
  min-width: 0;
  min-height: 0;
}


正如您在fiddle中所看到的,省略号没有显示。希望在此方面获得帮助。

最佳答案

您忘记添加white-space: nowrap

span {
  white-space: nowrap; <<
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 6px;
}

关于css - 尽管设置了最小宽度和高度,但网格列中的溢出仍然不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59564959/

10-16 14:14
查看更多