Don't know how to truncate a string inside a nested div

avdor

Hello, I am looking for a way to truncate the text variable inside the first span element once the size of the text overflows the oldest div(the row col-9 class div). I have tried adding some CSS styling to the style property like the white-space: nowrap, text-overflow: ellipsis, overflow: hidden, but it doesn’t seem to work, anyone got any ideas how I might solve this ?

<div class="row col-9">
            <q-checkbox label="done" v-model="finished" v-if="flag"/>
          <div class="row q-ml-md nowrap">
            <q-avatar class="q-mt-sm" size="md">
                <img src="picture.png">
            </q-avatar>
            <div class="column">
                <span class="q-ml-sm text-subtitle2 ellipsis">{{text}}</span> // this line needs to be truncated
                <q-tooltip content-class="bg-primary" anchor="top middle" self="top middle">
                  {{ text }}
                </q-tooltip>
                <span class="q-ml-sm">{{description}}</span>
            </div>
          </div>
        </div>