During the development process, we often encounter the problem that the space is too small and the text is not fully displayed. It may not have a big impact on some data, but for some data descriptions that start with the same end and end differently, it may not be possible to distinguish them. Solution: Use the mouse to drag in the effect of displaying all the text to solve it.
1. Use :title to achieve the effect of displaying the corresponding information when the mouse is inserted
Definition and usage of title attribute
The title attribute specifies additional information about the element.
This information usually displays a tooltip text (tooltip text) when the mouse moves over the element.
<div title="鼠标划入显示我的信息">
你好
</div>2. The added text is too long to display an ellipsis
width: 400px;//设置宽度
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
white-space: nowrap;//只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;3. Use together to realize the function
Add the cursor: pointer; attribute to display the small hand when the mouse is drawn in to improve the interaction effect
<template>
<div title="鼠标划入显示我的信息" class="title">你好你好你好你好</div>
</template>
<script>
export default {
name: "HomeView",
components: {},
data:()=>{
return {
title:'鼠标划入显示我的信息'
}
}
};
</script>
<style>
.title {
width: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
</style>