I have a grid with 2 columns and i want to add an element inside the 2 column grid that will have an ellipsis if it is too long. But when I add whitespace: nowrap; to the css it breaks the grid columns. Why and is there a way to fix it?
Simple example with 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>As you can see in the second example there are 2 even columns but in the first example there it breaks out through the right side of the body. Also I do want to be able to add more content to the div. So I only want the ellipsis for the span.