能否提供一个完成 ellipsis DOM 操作之后的回调

[07akioni]

我有一些定制的需求需要调整 Ellipsis Node 的位置，这个必须在完成 ellipsis 运算之后才能做

[07akioni]

看起来 onReflow 好像可以，我试试

[chenquincy]

@07akioni 简单的给 __react-ellipsis-js-ellipsis span 标签添加一个 float: right 样式也是可以的

[chenquincy]

@07akioni 简单的给 __react-ellipsis-js-ellipsis span 标签添加一个 float: right 样式也是可以的

仔细想了想这个应该不行，因为是在原容器上缩略，直接添加样式会影响到后面的计算。如果有需要的话可以再开个 issue，我可以提供个选项配置。

[07akioni]

现在想要的是这种效果，按钮在最后边，然后左边 ellipsis

[07akioni]

我在 onReflow 打 debugger 感觉好像还没完全排完

[chenquincy]

@07akioni onReflow 在排完才会调用，你有对容器的样式做一些修改是么？
每次缩略都是在原容器上进行的，如果对原容器的样式做过修改，可能导致计算错误，因为缩略前没有重置样式。

[07akioni]

@07akioni onReflow 在排完才会调用，你有对容器的样式做一些修改是么？
每次缩略都是在原容器上进行的，如果对原容器的样式做过修改，可能导致计算错误，因为缩略前没有重置样式。

我应该是没改容器，我多等了一个 Promise.then 然后样式才好了

[chenquincy]

那可能是事件循环导致的一个 bug，我后面看看需不需要将 onReflow 放到 nextTick 中。

[07akioni]

反正两次差了一个字

[chenquincy]

问题找到了，发版修复中

[chenquincy]

@07akioni 可以试试 v1.0.3 版本，已经发版

[07akioni]

待会我试一下，顺便问一句能不能 ellipsis 中间的字符

[07akioni]

[chenquincy]

理论上可行，但需求有点特殊，中间位置要怎么评判是个问题

[07akioni]

理论上可行，但需求有点特殊，中间位置要怎么评判是个问题 ---- 回复的原邮件 @.>发送日期2021年09月24日 16:29 @.> @.@.>主题Re: [chenquincy/react-ellipsis] 能否提供一个完成 ellipsis DOM 操作之后的回调 (#6) 待会我试一下，顺便问一句能不能 ellipsis 中间的字符 —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.Triage notifications on the go with GitHub Mobile for iOS or Android. [ { @.": "http://schema.org", @.": "EmailMessage", "potentialAction": { @.": "ViewAction", "target": "#6 (comment)", "url": "#6 (comment)", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { @.": "Organization", "name": "GitHub", "url": "https://github.com" } } ]

可以准确的提供 tail 是什么

[07akioni]

只是需要在提供 tail 之后能 ellipsis head 那部分

[07akioni]

用原生的 CSS 做存在一些问题，ellipsis 之后的 head 的和 tail 中间有一定距离

[chenquincy]

我大概能理解你的需求了。但是中间缩略在目前的设计会引入新的问题，比如需要引入新的字段去表示中间缩略位置的填充字符。
我理解你的需求其实可以通过添加一个 tailNode 来解决，tailNode 尾随在缩略文本之后，ellipsisNode 放在 tailNode 之后，在 onReflow 中去修改 ellipsisNode 的样式应该就可以达到你要的效果。

[07akioni]

我大概能理解你的需求了。但是中间缩略在目前的设计会引入新的问题，比如需要引入新的字段去表示中间缩略位置的填充字符。
我理解你的需求其实可以通过添加一个 tailNode 来解决，tailNode 尾随在缩略文本之后，ellipsisNode 放在 tailNode 之后，在 onReflow 中去修改 ellipsisNode 的样式应该就可以达到你要的效果。

我试试

[chenquincy]

矛盾点在于，ellipsisNode 会被放置在一个单独的 span 标签中，因此把 "..." 和 “展开” 都放在 ellipsisNode 中的话就势必会有前后空位的问题。
比较 hack 的解决方案是在 onReflow 中，用 innerText 把最后一个文字替换成 "..."，然后修改 ellipsisNode 的样式向右浮动。

[07akioni]

还发现个 bug，希望修一下，就是这个库里面用的都是 useEffect，这样的话在切换状态是会闪的，尤其是 reflow，最好都用 useLayoutEffect

[07akioni]

2021-09-24.5.03.33.mov

换成 useLayoutEffect 之后就没问题了，现在这样是有问题的

[chenquincy]

在原容器上缩略的话这个问题在频繁触发 reflow 时不太好避免，不过用 useLayoutEffect 确实会改善一点，我优化一下吧

[07akioni]

在原容器上缩略的话这个问题在频繁触发 reflow 时不太好避免，不过用 useLayoutEffect 确实会改善一点，我优化一下吧

这个在 DEMO 里其实也能看出来，确实会闪。

[chenquincy]

是的，之前优化过，触发频率已经比较低了，但从实现逻辑来说，是一定会存在的，只能是尽可能的降低触发频率。
useLayoutEffect已经替换，v1.0.4 已发布。

[chenquincy]

reflow 频繁触发的场景比较少，影响不太大

[07akioni]

还有一个问题就是好像 custom ellipsis node 的时候如果是一个连起来的单词，不会触发 ellipsis。

webkit-line-clamp 就不会有问题。

[07akioni]

这个应该和 word-break: break-all; 这种样式相关联，因为默认状况下单词不折行，所以一个完整的文件名就会不能 work

[chenquincy]

给容器添加一下 word-break 样式应该就可以了，为了确保不影响父容器所以没有做这个默认设置。

[07akioni]

给容器添加一下 word-break 样式应该就可以了，为了确保不影响父容器所以没有做这个默认设置。

OK

[07akioni]

感谢，这库比剩下几个下载量高的靠谱多了

[eyea]

现在想要的是这种效果，按钮在最后边，然后左边 ellipsis

@07akioni 请问下你这个效果有demo么，我现在需求是ellipseNode位于最后，且点击有样式变化，该节点不消失

[eyea]

现在想要的是这种效果，按钮在最后边，然后左边 ellipsis

@07akioni 请问下你这个效果有demo么，我现在需求是ellipseNode位于最后，且点击有样式变化，该节点不消失

翻issues看到了 collapseNode.. hhhhh 我再看看 位于行尾怎么处理~~~

[eyea]

矛盾点在于，ellipsisNode 会被放置在一个单独的 span 标签中，因此把 "..." 和 “展开” 都放在 ellipsisNode 中的话就势必会有前后空位的问题。 比较 hack 的解决方案是在 onReflow 中，用 innerText 把最后一个文字替换成 "..."，然后修改 ellipsisNode 的样式向右浮动。

1. 在 TypeScript 中，Element 类型没有 innerText 属性。 使用 textContent 即可
2. 在onReflow中根据document.querySelector('.__react-ellipsis-js-collapse');是找不到元素的，可以在样式文件直接修改

      .__react-ellipsis-js-collapse {
        float: right;
      }

另外 ...和文字在一起，然后ellipsisNode在右侧显示，感觉很多issues都反映了这个问题；是否考虑支持下呢 ？