跳至主要內容

element-ui利用el-tooltip实现文本超出提示

zfh原创开发日志VueelementUIvue2大约 1 分钟约 299 字

开始之前...

以下概念均不包括margin,因为它不是元素的一部分

offsetWidth/offsetHeight:它们提供了元素的“外部” width/height。或者,换句话说,它的完整大小(包括边框)

scrollWidth/scrollHeight这些属性就像 clientWidth/clientHeight,但它们还包括滚动出(隐藏)的部分

clientWidth/clientHeight:这些属性提供了元素边框内区域的大小。它们包括了 “content width” 和 “padding”,但不包括滚动条宽度(scrollbar:不同的设备和浏览器,滚动条的宽度可能有所不同,chorme 浏览器的滚动条宽带为15px

元素大小和滚动(目前看到解释最好的一篇)open in new window

写业务碰到需要固定容器判断文字是否超出,超出部分使用省略号隐藏,鼠标悬浮显示 tip。

html 结构:

<el-tooltip effect="dark" :content="title" placement="top" :disabled="!show">
  <div class="context" ref="text">{{ title }}</div>
</el-tooltip>

省略号使用 css 完成:

.context {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

判断是否超出逻辑:

const el = this.$refs.text
// 大于即超出可视区
this.show = el && el.scrollWidth > el.offsetWidth
上次编辑于:
本站勉强运行 小时