title: Vuetify data table component - Truncate text in cell using CSS
body: <p>In the following example, is there any way to use CSS to truncate the text in the cell (rather than have it wrap around or overflow)? Ideally, the CSS should look something like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  </code></pre>
  
  <p>But as you can see below, this just causes the cell to consume all the space:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
    &lt;style&gt;
  .truncate {
    display: inline-block;
    /* width: 200px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
  &lt;v-app&gt;
    &lt;v-content&gt;
      &lt;v-data-table :headers="headers" :items="items"&gt;
        &lt;template v-slot:item.name="{ item }"&gt;
          &lt;span class="truncate"&gt;{{ item.name}}&lt;/span&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-content&gt;
  &lt;/v-app&gt;
    &lt;/div&gt;
  
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"&gt;&lt;/script&gt;
    &lt;script&gt;
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      headers: [
        { text: 'Name', value: 'name', width: "75%" },
        { text: 'Calories', value: 'calories', width: "25%" },
      ],
      items: [
        { name: 'Frozen Yogurt', calories: 159, },
        { name: 'Ice cream sandwich with a really, really, really long name that keeps going on and on and on forever so there is no space left', calories: 237, },
        { name: 'Eclair', calories: 262, },
      ], }
  })
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is possible to achieve the desired effect by specifying a fixed width in pixels, but I would like the table and its columns to be responsive.</p>