Javascript 在React16中的长字符串中间添加省略号

我试图在字符串的中点添加省略号，但出现以下复杂情况：

• 我不知道绳子会有多长
• 我只知道父元素的最大宽度和最小宽度
• 字符串可能适合也可能不适合其父字符串，并且不需要省略号

我有一个例子来说明这一点。脚本仅假设一个实例，但您应该了解：

(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)
    }
})();

（函数（）{
//变数
var parent=document.querySelectorAll（“.wrapper”）[0]，
parentWidth=parent.clientWidth，x=0，元素，hellip
txtStr=document.querySelector（“#shorten”），
strWidth=txtStr.clientWidth，
strText=txtStr.innerText，
结束=document.createElement（“span”），
endTxt=strTxt.slice（Math.max（strTxt.length-（strTxt.length/4））| | endTxt；
txtStr.style.overflow=“隐藏”
txtStr.style.textOverflow=“省略号”
ending.appendChild（document.createTextNode（endTxt））
结束.classList.add（“省略号”）
document.querySelectorAll（“.wrapper”）[0]。appendChild（结束）
var ell=函数（a，b）{
如果（a感谢大家关注这一点，但我设法解决了问题

一旦我找到了生命周期的诀窍，它实际上仍然相当棘手。问题是测量原始文本字符串。现在回想起来，它似乎无关紧要

本质上，我将一些元素作为道具传递到组件中：id、任何所需的填充、上下文所需的结束文本的长度和文本（子项）

一旦它们进入，我需要等到它被装载，直到我可以做任何事情，因为这一切都取决于呈现的DOM。因此，componentDidMount（）和componentDidUpdate（）是我感兴趣的阶段。componentWillUnmount（）用于删除关联的事件侦听器，在本例中，该侦听器是一个调整大小事件

安装后，我可以获得测量所需的位：元素，更重要的是，它的父元素

getElements(){
  return {
    parent: this.ellipsis.offsetParent,
    string: this.props.children
  }
}

然后，我需要确保我可以实际测量元素，因此实现一些内联样式以实现这一点：

prepareParentForMeasure(){
  if(this.getElements().parent != null){
    this.getElements().parent.style.opacity = 0.001
    this.getElements().parent.style.overflow = 'visible'
    this.getElements().parent.style.width = 'auto'
  }
}

一旦我有了这些测量，我就删除了样式

在这一点上，如果我沿着相同的路径继续，脚本将部分工作。然而，添加一个额外的元素作为向导是关键

返回的元素分为三个元素（span标记），每个都有不同的用途。有文本的主位，或者this.props.children，如果您愿意的话。这是始终可用的，并且从不更改。下一个是文本的尾部，字符串末尾用于上下文显示字符串结尾的“n”个字符数-这是一个“省略号”类，尽管llipsis实际上被添加到原始元素和第一个元素中。第三个元素本质上与第一个元素完全相同，但它是隐藏的和不可理解的，尽管它确实有维度。这是因为前两个元素（渲染时）具有不同的宽度，并且不能依赖于它们，因为两者都有助于元素的宽度，而第三个元素有没有

<Fragment>
  <span className='text'>{this.props.children}</span>
  <span className='ellipsis'>{this.tail()}</span>
  <span className='text guide' ref={node => this.ellipsis = node}>
    {this.props.children}</span>
</Fragment>


{this.props.children}
{this.tail（）}
this.ellipsis=node}>
{this.props.children}

它们位于片段中，因此不需要周围的元素

因此，我有周围父元素的宽度和文本元素的宽度（在第三个跨度中）这意味着，如果我发现文本字符串比周围的包装器宽，我将一个类添加到“可见”的省略号范围，一个到“修剪”的“文本”元素，在字符串的中间得到一个省略号，并且我使用调整大小事件来确保如果有人这样做，所有的测量都被重做，并且数据是重新计算的。ted和相应的呈现。
为发布答案干杯这不是一件平常的事，但为好奇的人提供一点帮助是一件好事。我不能把所有的东西都放在这里，真是遗憾。你可以随时共享github reponop。不能这样做。这是专有的，我确实关心一些事情\