I am working on a grid layout where each column contains a div with text. My goal is to have the text show ellipsis when it overflows the column, even though the number of columns is random.
I attempted to use the following CSS for the text-containing div:
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
However, I found that unless I specify a width, the ellipsis will not be displayed.
Here is my CSS file:
.top-container {
width: 400px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.column-container-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.column-container-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And here is my HTML code:
<div>
<div className="top-container">
<div style={{background: "grey"}}>first column</div>
<div style={{background: "yellow"}}>second column</div>
</div>
<div className="top-container">
<div className="column-container-2">
<div style={{gridColumnStart: 1, background: "blue"}}>
<div className="truncate">This is my long text</div>
</div>
<div style={{gridColumnStart: 2, background: "red"}}>
<div className="truncate">This is another long text</div>
</div>
</div>
<div className="column-container-3">
<div style={{gridColumnStart: 1, background: "green"}}>
<div className="truncate">This is another long text</div>
</div>
<div style={{gridColumnStart: 2, background: "purple"}}>
<div className="truncate">This is another long text</div>
</div>
<div style={{gridColumnStart: 3, background: "black"}}>
<div className="truncate">This is another long text</div>
</div>
</div>
</div>
</div>
You can view the code on Stackblitz here: https://stackblitz.com/edit/react-rtrhv3
My goal is for the columns in the following section to be the same size as the
<div style={{background: "grey"}}>first column</div>