[Vuejs]-How to mask long text and show full text when hover in vuejs + vuetify?

by

4👍

Has nothing to do with Vue. It’s done via CSS:

span {
  width: 100px; /* can be 100% ellipsis will happen when contents exceed it */ 
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
span:hover {
  white-space: normal;
  /* or: 
  width: auto;
  */
}
<span>This is an example</span>

You can decide if you want to increase width on hover or to change white-space (allow it to wrap, so it increases the computed height).

The “good UI” option is to not increase either height of width but instead use a tooltip to display the full contents. But that’s outside the scope of this question, as it largely depends on what your tooltip library is (Vuetify, BootstrapVue come with their own and you also have some stand-alone plugins).

For the ellipsis effect, all these conditions must be met:

  • display set to box or flex model
  • white-space: nowrap;
  • text-overflow: ellipsis;
  • overflow: hidden;
  • computed width of text to exceed computed width of element

If you remove any of them, it won’t happen.

👤tao

Leave a comment