如何在vuejs + vuetify中屏蔽长文本并在鼠标悬停时显示全文？

Question

我想把长的文本掩盖在数据表格中，比如www.go.ogle......，当鼠标悬停在www.go.ogle......上时，就会显示全文。文本来自json数组，我已经对数据表格中的这部分元素做了处理。

这在vuejs中是如何实现的？

Answer 1

与Vue无关。它是通过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>

你可以决定是否要增加 width 悬停或改变 white-space (允许它包起来，所以它增加了计算的 height).

该 "良好的用户界面" 选项是不增加任何一个 height 的 width 而是使用工具提示来显示全部内容。但这不在这个问题的范围内，因为这主要取决于你的工具提示库是什么（Vuetify、BootstrapVue自带，你也有一些独立的插件）。

要实现省略号效果，这些条件都必须满足。

• display 设置为box或flex模型
• white-space: nowrap;
• text-overflow: ellipsis;
• overflow: hidden;
• 计算后的文本宽度超过计算后的宽度 width 的元素

如果你去掉其中任何一个，就不会发生。