Vue超出文本框显示省略号，鼠标滑过显示全部；Vue动态绑定title属性；使用ES6新增模板字符串进行拼接（反引号）_vue超出部分显示省略号,鼠标移动显示全称

作者：花生_TL007 | 2024-02-16 07:09:29

踩

vue超出部分显示省略号,鼠标移动显示全称

1. title定义和基础用法：

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
1
2

提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性

众所周知，基础用法如下：

例：

<html>
  <body>
    <p title="鼠标滑过 我就显示啦">Hello Word</p>
  </body>
</html>
1
2
3
4
5

效果：
在这里插入图片描述
2.在Vue中的用法一：

例（配合超出隐藏，显示省略号）：

// html部分
<p class='example-class' :title="example">
    {{ example }}
</p>
// css部分
.example-class {
	height: 20px;
	width: 100px;
	white-space: nowrap; //不换行
	overflow: hidden; //超出则隐藏
	text-overflow: ellipsis; //为文字加上省略
}
1
2
3
4
5
6
7
8
9
10
11
12

3.在Vue中的用法二：

例（配合ES6新增模板字符串（反引号``））：

// html部分
<p class='example-class' :title="`${example}计划执行情况`">
    {{ example }}计划执行情况
</p>
// css部分
.example-class {
	height: 20px;
	width: 100px;
	white-space: nowrap; //不换行
	overflow: hidden; //超出则隐藏
	text-overflow: ellipsis; //为文字加上省略
}
1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/91690