不再适合时隐藏整个文本块

Question

我的文本似乎默认隐藏不适合 div 的特定部分。一旦不再适合，我希望整个街区消失。

有什么办法吗？

这是我目前拥有的示例应用程序：

const App = () => {

  return (
    <div className='container'>
      <p className='text'> If you don't fit you need to be hidden. If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.</p>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  border: 1px solid red;
  height: 150px;
  width: 150px;
  overflow: hidden;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

TL;DR：工作示例here。

---

我认为没有 css 方法可以做到这一点，但由于您使用的是 React，您可以利用 refs 并计算元素大小。

1。获取对元素的引用

请注意，您不能使用标准的 useRef 挂钩（据我所知），因为对这些挂钩的更改不会触发重新渲染，因此 React 不会知道您的容器何时溢出。 相反，您可以使用 callback ref 并将其存储在状态中。

const [textRef, setTextRef] = useState(null);

...

<div ref={(newRef) => setTextRef(newRef)} className="container">
  ...
</div>

2。检查是否溢出

现在您有了对该元素的引用，您可以通过比较 scrollHeight 和 offsetHeight 属性来计算它是否溢出。

const overflows = textRef.scrollHeight > textRef.offsetHeight;

3。在状态中存储信息

您必须在元素更改时动态执行此操作，因此请将其放在 useEffect 挂钩中，并以 textRef 作为依赖项。然后将“溢出”属性存储在状态中以供以后使用。

const [overflows, setOverflows] = useState(false);

useEffect(() => {
  if (textRef) {
    const overflows = textRef.scrollHeight > textRef.offsetHeight;
    setOverflows(overflows);
  }
}, [textRef]);

4。有条件地渲染

现在您知道元素是否溢出并且状态中包含该信息，您可以简单地有条件地渲染元素。

<div ref={(newRef) => setTextRef(newRef)} className="container">
  {!overflows && <p className="text">If you don't fit you need to be hidden...</p>}
</div>

---

查看working example，您可以看到其中一个元素显示是因为它的文本较少且适合，而另一个元素因为溢出而被隐藏。