Put ellipsis ... on v-data-table - vue.js

Question

I have a v-data-table with 5 columns, which some have predefined widths, and some don't.
I'd like only one line of text maximum for each item and display "..." when the text exceeds 1 line.
<v-data-table
dark
:footer-props="{ 'items-per-page-options': [10, 25, -1] }"
dense
calculate-widths
fixed-header
height="498"
:headers="headers"
hide-default-header
:items="res"
sort-by="publicationDate"
:sortDesc="sortVal"
>
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers" :class="h.class"
:key="h.text">
<span>{{h.text}}</span>
</th>
</tr>
</thead>
</template>
<template #item.video="{ item }">
<a
target="_blank"
v-if="item.video != ''"
class="links1 video-icon"
:href="item.video"
>
<v-btn dark icon>
<v-icon class="ic1">mdi-movie</v-icon>
</v-btn>
</a>
</template>
<template #item.title2="{ item }">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</template>
</v-data-table>
I looked through the CSS properties to do so and I found things like :
text-overflow: ellipsis;
white-space: nowrap;
But it doesn't add the ... at the end of the lines and it also takes place beyond the widths applied to each columns so not all 5 columns are displayed on my panel.
Here's the headers in the data section
headers: [
{ text: "Source", value: "dataSource", width: "120px", class:"source-field"},
{ text: "News", value: "title2", width: "214px", class:"news-field"},
{ text: "Actors", value: "concernedActors", width: "242px" },
{ text: "Video", value: "video", width: "58px" },
{ text: "Publication", value: "publicationDate", width: "80px" },
],
And I tried this css but it won't work, the column news just goes bigger so that the entire text fits on 1 line.
th.news-field{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I would also love to make the hover darker on each line in the table

Answer 1

Here's a solution:
<template #item.foo="{ item }">
<div class="ellipsis-wrapper">{{ item.foo }}</div>
</template>
#your-table td {
position: relative;
}
#your-table td .ellipsis-wrapper {
position: absolute;
max-width: calc(100% - 1rem);
line-height: calc(3rem - 1px); /* change this if needed */
top: 0;
left: 1rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
But it creates another problem (easier to solve, IMHO): it takes the cell content out of the flow, therefore the table no longer calculates column width based on cells content (from the table's perspective, that column has no content) - so it relies on its header content (or on the provided width) to calculate the column width.
However, I believe making an "empty" column have a particular width (or a proportion from the table's width) is an easier to solve problem than your current one.
Demo: https://codepen.io/andrei-gheorghiu/pen/wvjoQXR