q-select selection is going outside of the input-CodePudding

Here's my markup for the q-select

      <q-select
        square
        outlined
        fill-input
        standout="bg-grey-3 text-white"
        v-model="unit_selection"
        :options="units"
        options-dense
        dense
      >
      </q-select>

I noticed that I had some long options in my units, so I just set this long value and the q-select just lets that text go way outside of the box.

let units = ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa']

Is there a way to shorten the length of the selected option so that it cuts it off so it doesn't go outside of the box?

CodePudding user response：

okay figured it out, had to inspect element and found that this class needs to hide its overflow

.q-field__native {
  overflow: hidden;
}

honestly it should just be like this out of the box. Also need to add a max width to the q-select otherwise the largest selected option will just make the box huge.