How to text ellipsis with width auto / dynamically? - html

Question

I have a table where I group all the orders of a user. The product name row is often very large, so the text comes out of the table and breaks the layout of the entire page.
To solve this I am using text ellipsis with a max-width: 200px;. This is fine on desktop, but when I switch to tablet or mobile the 200px width is no longer fine.
So I would have to change max-width every time according to the browser display width (mobile, tablet, portrait etc ..), this is insane.
So is there any way to make the width of text ellipsis work automatically? Or determine the width of the text ellipsis based on the row width percentage ?
To better explain the problem
I used a wide range of media queries for the convenience of the question. .product_name is 100% wide and that's what I want.
.product_name> a on the other hand has a fixed width of 200px, so even if the screen gets bigger or smaller, the product name is always displayed with the same width.
To solve this problem I would have to use different media queries and change the max-width of .product_name> a every time, which I want to avoid.
Is there a way to tell the max-width to automatically fit the width of td.product name ?
/*Global Container For Table*/
.global_container.order {
gap: 12px;
}
/* Table Width */
.product_number { width: 10%; }
.product_name { width: 35%; }
.product_data { width: 15%; }
.product_price { width: 10%; }
.product_status { width: 15%; }
.product_action { width: 15%; }
/* Table Heading */
.table_orders.heading > tbody > tr > td {
color: #4B525F;
font-weight: 600;
}
.table_orders.heading {
border: solid #e0e0e0;
border-width: 0px 0px 1px 0px;
padding: 0px 0px 12px 0px;
width: 100%;
}
/* Table Orders */
.table_orders {
text-align: left;
border: 0;
font-weight: 400;
color: #737477;
padding-top: 12px;
width: 100%;
}
td {
border: 0;
font-size: 13px;
}
/* Text Ellipsis */
.product_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/*** Mobile Device Range ***/
#media only screen and (min-width: 280px) and (max-width: 1024px){
.table_orders.heading { display: none; }
/* Name Before Value */
.product_number::before { content: 'Ordine'; }
.product_name::before { content: 'Prodotto'; }
.product_data::before { content: 'Data'; }
.product_price::before{ content: 'Prezzo'; }
.product_status::before { content: 'Stato'; }
.product_action::before { content: 'File'; }
/* Items */
.product_name {
white-space: unset;
overflow: unset;
text-overflow: unset;
max-width: unset;
}
.product_name > a {
text-align: right;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
}
td {
display: flex;
width: 100%!important;
flex-direction: row;
justify-content: space-between;
}
}
<table class="table_orders heading">
<tr class="table_row">
<td class="product_number">Order ID</td>
<td class="product_name">Product Name</td>
<td class="product_data">Date</td>
<td class="product_price">Total</td>
<td class="product_status">Status</td>
<td class="product_action">File</td>
</tr>
</table>
<table class="table_orders">
<tr class="table_row_items">
<td class="product_number">
<span>#12345</span>
</td>
<td class="product_name">
Product Name is very long long long long long long long long long long long
</td>
<td class="product_data">
<span>02/08/2022</span>
</td>
<td class="product_price">
<span>Order Total</span>
</td>
<td class="product_status">
<span>Purchuased</span>
</td>
<td class="product_action">
Show
</td>
</tr>
</table>

Answer 1

Use #media to change css based on screen size.
Example:
#media only screen and (max-width: 600px) {
.product_name {
max-width: 100px;
}
}
Code:
/*Global Container For Table*/
.global_container.order {
gap: 12px;
}
/* Table Width */
.product_number { width: 10%; }
.product_name { width: 35%; }
.product_data { width: 15%; }
.product_price { width: 10%; }
.product_status { width: 15%; }
.product_action { width: 15%; }
/* Table Heading */
.table_orders.heading > tbody > tr > td {
color: #4B525F;
font-weight: 600;
}
.table_orders.heading {
border: solid #e0e0e0;
border-width: 0px 0px 1px 0px;
padding: 0px 0px 12px 0px;
width: 100%;
}
/* Table Orders */
.table_orders {
text-align: left;
border: 0;
font-weight: 400;
color: #737477;
padding-top: 12px;
width: 100%;
}
td {
border: 0;
font-size: 13px;
}
/* Text Ellipsis */
.product_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
#media only screen and (max-width: 600px) {
.product_name {
max-width: 100px
}
}
<table class="table_orders heading">
<tr class="table_row">
<td class="product_number">Order ID</td>
<td class="product_name">Product Name</td>
<td class="product_data">Date</td>
<td class="product_price">Total</td>
<td class="product_status">Status</td>
<td class="product_action">File</td>
</tr>
</table>
<table class="table_orders">
<tr class="table_row_items">
<td class="product_number">
<span>#12345</span>
</td>
<td class="product_name">
Product Name is very long long long long long long long long long long long
</td>
<td class="product_data">
<span>02/08/2022</span>
</td>
<td class="product_price">
<span>Order Total</span>
</td>
<td class="product_status">
<span>Purchuased</span>
</td>
<td class="product_action">
Show
</td>
</tr>
</table>