在开发过程中经常会遇到空间太小文字展示不全的问题,对于一些数据可能影响不大,但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了。解决办法:通过鼠标划入展示全部文字的效果用来解决。
一、通过 :title 实现鼠标划入展示对应信息的效果
title属性的定义和用法
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。文章来源:https://www.toymoban.com/news/detail-502962.html
<div title="鼠标划入显示我的信息">
你好
</div>
二、添加文本太长显示省略号
width: 400px;//设置宽度
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。
white-space: nowrap;//只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
三、配合使用,实现功能
添加cursor: pointer;属性鼠标划入显示小手,提高交互效果文章来源地址https://www.toymoban.com/news/detail-502962.html
<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>
到了这里,关于Vue超出文本框显示省略号,鼠标滑入显示全部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!