js:判断文本溢出隐藏生效text-overflow: ellipsis

效果展示

参数汇总

看上图，不难发现，文字有超出的条件是

target.scrollWidth > target.offsetWidth
1

可以通过js判断是否生效，参考element-ui的代码实现
https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js#L241

它多了一个判断

rangeWidth + padding > target.offsetWidth
1

完整代码

<template>
  <div class="">
    <h2>正常显示 borderh2>

    <div
      id="text-1"
      class="border"
    >
      水光潋滟晴方好，山色空濛雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
    div>
    <div id="text-1-label">div>

    <h2>设置宽度 border width--100h2>
    <div
      id="text-2"
      class="border width--100"
    >
      水光潋滟晴方好，山色空濛雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
    div>
    <div id="text-2-label">div>

    <h2>设置宽度+不换行 border width--100 white-space--nowraph2>
    <div
      id="text-3"
      class="border width--100 white-space--nowrap"
    >
      水光潋滟晴方好，山色空濛雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
    div>
    <div id="text-3-label">div>

    <h2>
      设置宽度+不换行+溢出隐藏 border width--100 white-space--nowrap
      overflow--hidden
    h2>
    <div
      id="text-4"
      class="border width--100 white-space--nowrap overflow--hidden"
    >
      水光潋滟晴方好，山色空濛雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
    div>
    <div id="text-4-label">div>

    <h2>
      设置宽度+不换行+溢出隐藏+溢出省略号 border width--100 white-space--nowrap
      overflow--hidden text-overflow--ellipsis
    h2>
    <div
      id="text-5"
      class="border width--100 white-space--nowrap overflow--hidden text-overflow--ellipsis"
    >
      水光潋滟晴方好，山色空濛雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
    div>
    <div id="text-5-label">div>

    <h2>显示为行内块元素 border display--inline-blockh2>
    <div
      id="text-6"
      class="border display--inline-block"
    >
      水光潋滟晴方好，山色空濛雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
    div>
    <div id="text-6-label">div>
  div>
template>

<script>
export default {
  name: 'index',

  props: {},

  components: {},

  data() {
    return {}
  },

  computed: {},

  methods: {
    handleCellMouseEnter(target) {
      function getStyle(element, property = null) {
        const css = window.getComputedStyle(element, null)
        return property ? css[property] : css
      }

      // console.log(e.target)
      // let target = e.target

      const range = document.createRange()
      range.setStart(target, 0)
      range.setEnd(target, target.childNodes.length)

      // console.log(range)

      const rangeWidth = range.getBoundingClientRect().width
      const padding =
        (parseInt(getStyle(target, 'paddingLeft'), 10) || 0) +
        (parseInt(getStyle(target, 'paddingRight'), 10) || 0)

      let data = {
        rangeWidth,
        padding,
        'rangeWidth+padding': rangeWidth + padding,
        offsetWidth: target.offsetWidth,
        scrollWidth: target.scrollWidth,
      }

      document.querySelector(`#${target.id}-label`).innerText =
        JSON.stringify(data)

      if (
        rangeWidth + padding > target.offsetWidth ||
        target.scrollWidth > target.offsetWidth
      ) {
        console.log('有隐藏文字...')
      } else {
        console.log('没有隐藏文字')
      }

      return data
      // console.log(target.innerText || target.textContent)
    },
  },

  mounted() {
    let list = [...document.querySelectorAll('[id^="text"]')]

    let data = []
    for (let item of list) {
      if (item.id.endsWith('label')) {
        continue
      }

      let res = this.handleCellMouseEnter(item)
      data.push(res)
    }

    console.table(data)
  },

  created() {},
}
script>

<style lang="less">style>

<style lang="less" scoped>
h2 {
  margin-top: 50px;
  line-height: 1.5;
  font-weight: 500;
}

.border {
  box-sizing: border-box;
  border: 1px solid #666;
  padding: 10px;
}

.width--100 {
  width: 100px;
}

.white-space--nowrap {
  white-space: nowrap;
}

.overflow--hidden {
  overflow: hidden;
}

.text-overflow--ellipsis {
  text-overflow: ellipsis;
}

.display--inline-block {
  display: inline-block;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

参考

1. 你真的知道什么情况下text-overflow:ellipsis才会生效吗？
2. element table组件的show-overflow-tooltip属性的实现原理