【问题标题】:How can I can make my text truncate to work on continuous responsive?如何使我的文本截断以进行持续响应?
【发布时间】:2021-06-23 00:37:17
【问题描述】:

我做了一个文本截断来检查是否溢出,因此它将显示ReadMore 按钮,需要使其连续读取元素高度,以便它可以显示和删除响应式溢出活动,现在您可以在代码沙箱中看到它需要重新渲染以读取高度,但是当客户将窗口置于响应视图而不重新渲染时,他希望继续工作

代码沙盒演示:https://codesandbox.io/s/aged-breeze-bbqel

【问题讨论】:

    标签: javascript reactjs truncate


    【解决方案1】:

    将您编写的代码分配给窗口调整大小处理程序以检查溢出并显示 ReadMore 按钮作为函数。每次发生调整大小事件时都会触发。

    window.addEventListener('resize', function(event){
      // Check for overflow
    });
    

    将上述代码放在useEffect onMount中,在unMount部分添加removeEventListener,这样即使组件不存在也不会执行。

    【讨论】:

    • 有点困惑你能编辑我的代码和框代码吗?
    • 我把它放在渲染上是因为使用功能组件,希望它不会影响任何东西?
    • 太棒了!同样正如我所说,确保删除组件 unMount 上的事件侦听器,您可以通过在事件侦听器回调中添加控制台语句来检查。
    猜你喜欢
    • 2017-06-22
    • 2019-07-12
    • 2014-06-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-27
    • 1970-01-01
    • 2018-10-06
    相关资源
    最近更新 更多