前言
好久不见，最近白天工作比较忙，晚上的话我在学习java，因此博客更新进度就会比较慢，等我把java学完之后，博客就能正常更新了，敬请期待~,今天给大家带来一篇文章，来讲解下如何判断文字是否溢出的。
核心代码
就是判断文字的宽度是否大于容器的宽度，如果大于则说明文字溢出了，这里我用到了一个临时的span标签来计算文字的宽度，具体代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
export function isTextOverflow(element, text) {
const wrapperWidth = element.offsetWidth;
const fontSize = window.getComputedStyle(element).fontSize;
const tempEl = document.createElement('span');
tempEl.textContent = text;
tempEl.style.fontSize = fontSize;
tempEl.style.fontFamily = window.getComputedStyle(element).fontFamily;
tempEl.style.lineHeight = window.getComputedStyle(element).lineHeight;
document.body.appendChild(tempEl);
const textWidth = tempEl.offsetWidth;
document.body.removeChild(tempEl);
return textWidth > wrapperWidth;
}
|
测试使用
这里我用了tdesign的table组件，我这里想要自己定义溢出的popup，他的组件里面其实带了一个溢出效果，但我不想要这个，我就借用这个isTextOverflow来判断是否溢出，如果溢出了，我就显示一个popup，这里我用到了tdesign的popup组件，然后我就把这个popup组件封装成了一个组件，根据传入的文字来判断是否溢出了，如果溢出了，就用popup，如果没有就是普通的文字。记得slot的插槽也需要定义一下宽度，不然会不生效。
具体代码如下：
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
| <template>
<t-popup trigger="hover" v-if="isNeedShowText" {...popupPlguinParam}>
<template #content>
<slot name="content">
{{ showText }}
</slot>
</template>
<div ref="showTextRef" class="ellipsis-text">
<slot></slot>
</div>
</t-popup>
<div v-else ref="showTextRef" class="ellipsis-text">
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { isTextOverflow } from '@/utils/chat-system';
// 是否需要显示popup
const isNeedShowText = ref(false);
// dom的ref
const showTextRef = ref(null);
const props = defineProps<{
showText: string; // popup中的文字内容
popupPlguinParam?: any; // popup插件的参数
}>();
watch(
() => props.showText,
(newVal) => {
nextTick(() => {
const childrenDom = showTextRef.value.firstElementChild;
if (!childrenDom) {
return;
}
isNeedShowText.value = isTextOverflow(childrenDom, newVal);
});
},
{
immediate: true,
},
);
</script>
<style scoped>
.ellipsis-text {
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
line-height: 1;
}
</style>
|
结语
好了，今天的文章就到这里了，更多内容，敬请期待
