I've encountered an issue with a grid layout featuring 2 columns. I'm trying to insert an element into one of the columns that will display an ellipsis if its content is too long. However, when I add whitespace: nowrap; to the CSS, it causes the grid columns to break. Why is this happening and is there a solution?
Here's a simple example using nowrap:
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
max-width: 100%;
}
.grid > div {
padding: 10px;
border: 1px solid green;
}
a {
display: block;
}
span{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<div class="grid">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</div>
</div>Simple example without nowrap:
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
max-width: 100%;
}
.grid > div {
padding: 10px;
border: 1px solid green;
}
a {
display: block;
}
span{
overflow: hidden;
text-overflow: ellipsis;
}<div class="grid">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</div>
</div>In the second example, both columns appear evenly aligned. However, in the first example, the content spills over the right side of the body. Additionally, I only want the ellipsis styling to apply to the span element, not the entire div.