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>
-
Hi, I have the exact same problem now… did you find a solution?
EDIT: try to add “fit” just where you defined the “ellipsis” class. It worked for me!