如何判断一个行 div 内文字是否溢出?

Z时代
2024-02-13
分类：IT

老生常谈的问题了,最近在项目中遇到了实际需求

当一个 div中的文字溢出的时候就展示 true 否则就展示 false

附上在线测试地址

https://codepen.io/firstblood...

回答：

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div ref="text" class="text">{{message}}</div>
    <div>是否溢出: {{isOverflow}}</div>
    <button @click="change">切换文字</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOverflow: true,
      message: '我的的确确溢出了吧'
    };
  },
  methods: {
    change() {
      this.message = this.message==='我的的确确溢出了吧'?'我没有溢出':'我的的确确溢出了吧';
      this.$nextTick(() => {
        var el = this.$refs.text;
        this.isOverflow = el && el.scrollWidth > el.offsetWidth;
      })
    }
  }
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  .text{
    border:1px solid red;
    max-width:120px;
    display:inline-block;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }</style>