您好,首先我阅读了所有可能对我有帮助的答案:
这就是我的代码现在的样子(最好检查整页):
#content {
display: flex;
min-height: 100vh;
}
#news {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: 5px;
border: 2px solid white;
border-radius: 30px;
font-family: 'Caviar Dream';
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.5em;
color: #5a849d;
padding: 10px;
}
#une {
flex: 0 1 40%;
}
.grid {
flex: 0 1 60%;
display: grid;
margin: auto;
width: 90%;
height: 100%;
grid-template: repeat(3, 1fr) / 1;
}
.gridItem {
display: flex;
align-items: center;
/* height: calc(20px + 2vw); */
border: 1px solid red;
min-width: 0;
}
.gridItem > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#lastNews {
flex: 0 1 60%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 10px;
}
#news .new:nth-of-type(1) {
grid-column: 1;
grid-row: 1/4;
border: 1px solid black;
}
#news .new:nth-of-type(2) {
grid-column: 2;
grid-row: 1/4;
border: 1px solid black;
}
#folder1 {
grid-column: 3;
grid-row: 1;
border: 1px solid black;
}
#folder2 {
grid-column: 3;
grid-row: 2;
border: 1px solid black;
}
#folder3 {
grid-column: 3;
grid-row: 3;
border: 1px solid black;
}
<div id="content">
<div id="news">
<div id="une">
LOL
</div>
<div id="lastNews">
<div class="new grid">
<div class="gridItem">
Title
</div>
<div class="gridItem">
<span>
ACTU1 veqvn evove, vfdkvn qv^sojcoigv jôfviqsdn vqs^
qef ôsfn vpoin zfionzfq
zq o vqoinv oin sqv rieuh fq
qf sdifbpqdf ouzfzqpiufj epquh requestAnimationFramegq spidfbfd
pizqfb psdqifbnq ôiqsdf
F POFDB PFDSOFNDS FOQNFS
ACTU1 veqvn evove, vfdkvn qv^sojcoigv jôfviqsdn vqs^
qef ôsfn vpoin zfionzfq
zq o vqoinv oin sqv rieuh fq
qf sdifbpqdf ouzfzqpiufj epquh requestAnimationFramegq spidfbfd
pizqfb psdqifbnq ôiqsdf
F POFDB PFDSOFNDS FOQNFS
ACTU1 veqvn evove, vfdkvn qv^sojcoigv jôfviqsdn vqs^
qef ôsfn vpoin zfionzfq
zq o vqoinv oin sqv rieuh fq
qf sdifbpqdf ouzfzqpiufj epquh requestAnimationFramegq spidfbfd
pizqfb psdqifbnq ôiqsdf
F POFDB PFDSOFNDS FOQNFS
</span>
</div>
</div>
<div id="folder1">
Folder 1
</div>
<div id="folder2">
Folder 2
</div>
<div id="folder3">
Folder 3
</div>
</div>
</div>
</div>
你看到我的省略号在第一行缩短了我的文本。我想要的是仅当文本到达网格单元格的末尾时才将其省略。 我尝试了很多组合,但没有成功......任何帮助都会很棒:)