I have utilized a div with display grid to create a column structure.
<div id="two-column-structure">
<div></div>
<div></div>
</div>
styled with css
div.two-column-structure {
display: grid;
grid-template-columns: 1fr 380px;
}
however, when I input a lengthy word in the first column like
asdjlkasjdlkjsalkdjalskjdlkajsdlakjsdlkajsdlkasjdlkasjdlasjdlkfahskldhfalksdjhflakjsdhflaksjdhflkasaklsjdhfaklsdhflaksdhflkajsdhlafkjdshflkajfsdhlfkajshdlkfajhsdlfjashdlkfjashdlkjahskldsfjhalskdjfthe layout overflows and my design becomes disordered.
I understand that who would do that but I think that might be the issue.
.two-column {
display: grid;
grid-template-columns: 1fr 380px;
padding: 12px;
border: 1px solid red;
margin-bottom: 10px;
}
.two-column div {
padding: 10px;
}
.two-column-i-tried {
display: grid;
grid-template-columns: 1fr 380px;
padding: 12px;
border: 1px solid green;
margin-bottom: 10px;
}
.two-column-i-tried div:first-child {
border: 1px solid blue;
text-overflow: ellipse;
overflow: hidden;
}<div class="two-column">
<div> slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg
</div>
<div>
Right Column
</div>
</div>
<div class="two-column">
<div>
Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be shown in two-column-i-tried class div
</div>
<div>
Right Column
</div>
</div>
<div class="two-column-i-tried">
<div> slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg
</div>
<div>
Right Column
</div>
</div>
<div class="two-column-i-tried">
<div>
Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be shown in two-column-i-tried class div
</div>
<div>
Right Column
</div>
</div>In the html snippet when I use text-overflow and overflow to manage that lengthy text, it does not display ellipses as indicated in the code