一个EllipsisTooltip小组件
顾名思义，该组件是在内容超出容器宽度时，做隐藏处理，且鼠标悬浮会显示完整的文本内容
简单了解一下window.getComputedStyle()、CSSStyleDeclaration和getPropertyValue()
window.getComputedStyle()
- 定义和用法：
getComputedStyle() 方法用于获取指定元素的 CSS 样式。获取的样式是元素在浏览器中最终渲染效果的样式。
- 语法：
window.getComputedStyle(element, pseudoElement)
- 参数说明：
element: 必需，要获取样式的元素。
pseudoElement: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。
- 返回值
返回的对象是 CSSStyleDeclaration 类型的对象。
CSSStyleDeclaration
- 定义和用法：
CSSStyleDeclaration 对象表示一个 CSS 属性-值（property-value）对的集合。它暴露了样式信息和各种与样式相关的方法和属性。
- CSSStyleDeclaration 对象属性
| 属性 | 描述 |
|---|---|
| cssText | 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。 |
| length | 返回样式中包含多少条声明。 |
| parentRule | 返回包含当前规则的规则。 |
- CSSStyleDeclaration 对象方法
| 方法 | 描述 |
|---|---|
| getPropertyPriority() | 返回指定的 CSS 属性是否设置了 "important!" 属性。 |
| getPropertyValue() | 返回指定的 CSS 属性值。 |
| item() | 通过索引方式返回 CSS 声明中的 CSS 属性名。 |
| removeProperty() | 移除 CSS 声明中的 CSS 属性。 |
| setProperty() | 在 CSS 声明块中新建或者修改 CSS 属性。 |
getPropertyValue()
- 定义和用法：
CSSStyleDeclaration的getPropertyValue()方法返回指定的 CSS 属性的值。
- 语法：
object.getPropertyValue(propertyname)
- 属性值说明：
propertyname: 必需。一个字符串，表示要检测的属性名。
- 返回值
字符串, 表示属性值。
具体实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
position: relative;
font-size: 16px;
width: 300px;
}
.tooltip:after {
content: attr(data-tips);
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(100%);
padding: 3px 10px;
width: 400px;
white-space: pre-wrap;
word-wrap: break-word;
background: #FFFFFF;
border: 1px solid #D8D8D8;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.30);
font-family: 'PingFang-SC-Regular';
font-size: 18px;
color: #000000;
font-weight: 400;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
.tooltip:hover:after {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<p id="text">
很长很长的文本很长很长的文本很长很长的文本很长很长的文本
</p>
<script>
const textDom = document.querySelector('#text')
let content = '', isHaveToolTip = false
const text = textDom.innerText
const textLength = text.length
const baseWidth = window.getComputedStyle(textDom, null).getPropertyValue('width').slice(0, -2) //容器宽度
const baseFontSize = window.getComputedStyle(textDom, null).fontSize.slice(0, -2) //容器字体大小(可通过驼峰的CSS属性名拿到对应的属性值)
const charCount = Math.floor(baseWidth / baseFontSize) //容器所能容纳的字符数
if (textLength > charCount) {
content = text.substring(0, charCount - 1) + '...'
isHaveToolTip = true
/**
* 方法一：
* 使用DOM.setAttribute("class","类名")
* 方法一：
* DOM.classList.add("类名")
* 方法一给DOM元素添加类名会覆盖原有的类名
* 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名
*/
//添加class样式和设置显示的值
textDom.classList.add('tooltip')
textDom.setAttribute('data-tips', text)
textDom.innerText = content
}
</script>
</body>
</html>
效果截图
