超链接网站建设,中国建筑装饰网站,厦门网站建设培训,网站编程赚钱如果想要文本超出宽度后用省略号省略#xff0c;只需要加上以下的css就行了。
.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}3行css搞定#xff0c;但是问题来了#xff1a;如果我们想要当文本被省略的时候#xff0c;也就是当文本超出指定…如果想要文本超出宽度后用省略号省略只需要加上以下的css就行了。
.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}3行css搞定但是问题来了如果我们想要当文本被省略的时候也就是当文本超出指定的宽度后鼠标悬浮在文本上面才展示popper应该怎么实现呢
CSS帮我们搞定了省略但是JS并不知道文本什么时候被省略了所以我们得通过JS来计算。接下来我将介绍几种方法来实现JS计算省略。 createRange 我发现Element-plus表格组件已经实现了这个功能所以就先来学习一下它的源码。
源码地址https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/events-helper.ts
// 仅仅粘贴相关的
const cellChild (event.target as HTMLElement).querySelector(.cell)
const range document.createRange()
range.setStart(cellChild, 0)
range.setEnd(cellChild, cellChild.childNodes.length)
let rangeWidth range.getBoundingClientRect().width
let rangeHeight range.getBoundingClientRect().height
/** detail: https://github.com/element-plus/element-plus/issues/10790
* What went wrong?
* UI Browser Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost
precision during internal calculations. In the example above:
* - Expected: 188
* - Actual: 188.00000762939453
*/
const offsetWidth rangeWidth - Math.floor(rangeWidth)
if (offsetWidth 0.001) {rangeWidth Math.floor(rangeWidth)
}
const offsetHeight rangeHeight - Math.floor(rangeHeight)
if (offsetHeight 0.001) {rangeHeight Math.floor(rangeHeight)
}const { top, left, right, bottom } getPadding(cellChild) // 见下方
const horizontalPadding left right
const verticalPadding top bottom
if (rangeWidth horizontalPadding cellChild.offsetWidth ||rangeHeight verticalPadding cellChild.offsetHeight ||cellChild.scrollWidth cellChild.offsetWidth
) {createTablePopper(parent?.refs.tableWrapper,cell,cell.innerText || cell.textContent,nextZIndex,tooltipOptions)
}// 上面代码17行中的getPadding函数
const getPadding (el: HTMLElement) {const style window.getComputedStyle(el, null)const paddingLeft Number.parseInt(style.paddingLeft, 10) || 0const paddingRight Number.parseInt(style.paddingRight, 10) || 0const paddingTop Number.parseInt(style.paddingTop, 10) || 0const paddingBottom Number.parseInt(style.paddingBottom, 10) || 0return {left: paddingLeft,right: paddingRight,top: paddingTop,bottom: paddingBottom,}
}document.createRange() 是 JavaScript 中的一个方法用于创建一个 Range 对象表示文档中的一个范围。Range 对象通常用于选择文档中的一部分内容然后对其进行操作。
它可以
设置选中文本范围可以使用 document.createRange() 方法创建一个 Range 对象并使用 setStart() 和 setEnd() 方法设置选中文本的起始和结束位置。插入新元素可以使用 document.createRange() 方法创建一个 Range 对象并使用 insertNode() 方法将新元素插入到文档中的指定位置。获取特定元素的位置可以使用 document.createRange() 方法创建一个 Range 对象并使用 getBoundingClientRect() 方法获取元素在文档中的位置和大小信息。
这边element就是使用range对象的getBoundingClientRect获取到元素的宽高同时因为得到的宽高值有很多位的小数所以element-plus做了一个判断如果小数值小于0.001就舍弃小数部分。 接下来就让我们进行一下复刻吧。
文字的宽度 盒子的左右padding 盒子的offsetWidth 则存在省略号
div classellipsis boxLorem ipsum dolor sit amet consectetur adipisicing elit
/div
div idresult/divscriptconst box document.querySelector(.box);const getPadding (el) {const style window.getComputedStyle(el, null);const paddingLeft Number.parseInt(style.paddingLeft, 10) || 0;const paddingRight Number.parseInt(style.paddingRight, 10) || 0;const paddingTop Number.parseInt(style.paddingTop, 10) || 0;const paddingBottom Number.parseInt(style.paddingBottom, 10) || 0;return {pLeft: paddingLeft,pRight: paddingRight,pTop: paddingTop,pBottom: paddingBottom,};};box.addEventListener(animationiteration, function () {const event new CustomEvent(resize);box.dispatchEvent(event);});const checkEllipsis () {const range document.createRange();range.setStart(box, 0);range.setEnd(box, box.childNodes.length);window.getSelection().addRange(range);const rangeWidth range.getBoundingClientRect().width; // 所有文字的宽度const rangeHeight range.getBoundingClientRect().height; // 所有文字的高度console.log(rangeWidth, rangeHeight);const { pLeft, pRight, pTop, pBottom } getPadding(box);console.log(pLeft, pRight, pTop, pBottom, --);const horizontalPadding pLeft pRight;const verticalPadding pTop pBottom;if (rangeWidth horizontalPadding box.offsetWidth ||rangeHeight verticalPadding box.offsetHeight ||range.scrollWidth box.offsetWidth) {result.textContent 计算结果存在省略号;} else {result.textContent 计算结果容器宽度足够没有省略号了;}};checkEllipsis();box.addEventListener(resize, checkEllipsis);
/scriptstyle.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.box {border: 1px solid gray;padding: 10px;width: 300px;resize: both;/**触发频率**/animation: resize 0.1s infinite paused forwards;}.box:active {animation-play-state: running;}keyframes resize {to {opacity: 1;}}
/style
