我正在尝试将省略号添加到字符串的中点,并具有以下复杂性:
- 我不知道字符串要多长
- 我只知道父元素的最大宽度和最小宽度
- 字符串可能适合也可能不适合它的父级并且不需要省略号
我在这里有一个plunk来说明它。该脚本仅假定一个实例,但您应该明白:
(function(){
// variables
var parent = document.querySelectorAll(".wrapper")[0],
parentWidth = parent.clientWidth,x = 0, elem, hellip
txtStr = document.querySelector("#shorten"),
strWidth = txtStr.clientWidth,
strTxt = txtStr.innerText,
ending = document.createElement("span"),
endTxt = strTxt.slice(Math.max(strTxt.length - (strTxt.length / 4))) || endTxt;
txtStr.style.overflow = "hidden"
txtStr.style.textOverflow = "ellipsis"
ending.appendChild(document.createTextNode(endTxt))
ending.classList.add("ellipsis")
document.querySelectorAll(".wrapper")[0].appendChild(ending)
var ell = function(a, b){
if (a <= b){
ending.classList.add("visible")
}
else {
ending.classList.remove("visible")
}
}
ell(parentWidth, strWidth) // We need to display any changes immediately
window.onresize = function(){ // if the window is resized, we also need to display changes
hellip = document.querySelectorAll(".ellipsis")[0].clientWidth
parentWidth = parent.clientWidth
// the use of 'calc()' is because the length of string in px is never known
txtStr.style.width = "calc(100% - " + hellip + "px"
ell(parentWidth, strWidth)
}
})();
这有点笨拙,但证明了这个想法。
我在 React 16 中遇到的问题是字符串没有在我需要测量它以在最后创建文本位的点呈现。因此,当新节点被创建时,它没有维度并且无法测量,因为它不存在于 DOM 中。
该功能起作用 - 有点像屏幕调整大小,但这不是重点。我需要让它在渲染时完成。
实际的应用程序是专有的,我不能在这个论坛上分享我的任何代码。
编辑:要记住的另一件事(在这里教吸鸡蛋)是,在示例中,仅在渲染 DOM 后加载脚本,因此所需的所有信息都已经存在并且可以测量。