css - CSS 网格和文本溢出:省略号
问题描述
使用 CSS 网格时,我似乎无法使 text-overflow:ellipsis 工作,即使我将它应用于包含我想要缩短的文本的 dom 对象。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
.grid-item { border: 1px solid red;}
.grid-item .content{
background-color: lightgray;
}
&.with-ellipsis {
.title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
这是我的代码所在的笔:https ://codepen.io/dbugger/pen/qBBKLgX?editors=1100
解决方案
设置min-width: 0;
在.grid-item
. 这是 flexbox 项(和网格)子项的省略号的旧解决方案,您可以在此处阅读更多相关信息。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid .grid-item {
min-width: 0;
border: 1px solid red;
}
.grid .grid-item .content {
background-color: lightgray;
}
.grid.with-ellipsis .title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.demo {
display: inline-block;
width: 33%;
border: 1px solid red;
}
.demo .content {
background-color: lightgray;
}
.demo .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<h1>But what happens when you want some content inside the cell to have text-overflow: ellipsis</h1>
<div class="grid with-ellipsis">
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
</div>
推荐阅读
- angular - Angular 4 - 不要为下拉列表中的特定选项更新 ngModel
- sql - DBMS 输出不显示
- c++ - 尝试验证 int 输入并拒绝小数和空格
- php - PHP "for loop" 标签,从 MySQL 数据库到 HTML Table
- c - 如何测试零是否已更改为一(但不是相反)
- javascript - Node.js Webshot 不适用于 PowerBI,因为 Phantom.js 不支持 WebGL
- java - 如何在 Jhipster 的前端使用 HashMap?
- php - 如何使用 ACF 返回 WordPress REST API 中的永久链接?
- find - 如何查找名称包含字符串的文件夹
- java - 如何修复在 Eclipse 2019-03(4.11.0) 中不显示到控制台的输出