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



  • 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>
    

Log in to reply