The problem is in the text. There is a card with information with a fixed width, consisting of 3 parts (checkbox, info, status). The checkbox and status have a fixed width, and the info takes up the remaining space. In the info block, there are 2 blocks that include a description of the information in the block and a link to it (block 1 is 2 times smaller than block 2(optional)). The link is very long and needs to be shortened with ellipses. This is easy to achieve if the block only contains text. But if there are other blocks, then everything goes beyond the boundaries.
I am pasting an example code below. The application is on Next JS, so if the response uses React, then ok.
<div class="card"><div class="card__checkbox">bbb</div><div class="card__info"><div class="info-block info-block-1"><span class="info-block__description">description</span><div class="info-block__text-wrapper"><span class="info-block__text">aaaaaaaaaaaaaaaaaa</span><button class="info-block__copy-button">copy</button></div></div><div class="info-block info-block-2"><span class="info-block__description">description</span><div class="info-block__text-wrapper"><span class="info-block__text">aaaaaaaaaaaaaaaaaa</span></div></div></div><div class="card__status">status</div></div>.card { display: flex; align-items: end; width: 400px; gap: 10px; padding: 10px; border-radius: 10px; background-color: gray;}.card__checkbox { display: flex; justify-content: center; align-items: center; height: 65px; border-radius: 5px; background-color: lightblue;}.card__status { display: flex; justify-content: center; align-items: center; height: 65px; border-radius: 5px; background-color: lightgreen;}.card__info { display: flex; gap: 10px;}.info-block { display: flex; flex-direction: column; max-width: 100%; gap: 5px; padding: 5px; border-radius: 10px; background-color: bisque;}.info-block__text-wrapper { display: flex; gap: 10px; padding: 10px; background-color: gainsboro; border: 1px solid red; border-radius: 5px;}.info-block__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}I spent about 3 hours and still no result. I tried many ways. I asked gpt many times and all to no avail. The closest result I got was with a plain text block.
<div class='wrapper'><div class='b'>bbbbbbb</div><div class='childs-wrapper'><div class='child child1'><span>aaaaaaaaaaaaaaaaaaaaaaaa</span></div><div class="child child2"><span>aaaaaaaaaaaaaaaaaaaaaaaa</span> <div class='c'></div></div></div><div class='b'>bbbbbbbbbbbbbb</div></div>.wrapper { display: flex; align-items: center; width: 200px; gap: 10px;}.b { flex-shrink: 0;}.childs-wrapper { display: flex; flex-grow: 1; max-width: 100%; gap: 5px; overfrow: hidden;}.child { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.child1 { flex: 1;}.child2 { flex: 2;}