No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    styling
    2
    2
    396
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      avdor last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • N
        nulele last edited by nulele

        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!

        1 Reply Last reply Reply Quote 0
        • First post
          Last post