在两行文本后添加省略号和工具提示 - React

Question

是否可以创建一个可以在两行后添加省略号并仅在文本换行时显示工具提示的 React 组件？

我尝试使用“noWrap”属性和附加 CSS 自定义 Material UI 的 Typography 组件，但失败了。

请协助，我想实现这样的屏幕：

Answer 1

这个问题有两个主要方面：

• 根据垂直溢出显示文本溢出的省略号，以允许多于一行但不是无限制的
• 在这种情况下检测垂直溢出并包含工具提示功能

我不相信 FrankerZ 的解决方案会显示省略号。据我所知，text-overflow: ellipsis仅适用于需要将文本限制为一行的水平溢出。

我在这里找到了一个对垂直溢出做省略号的解决方案，但是一旦你开始将它包装在 Material UI 组件（例如 ListItem）中，将额外的 CSS 引入混合中，它可能需要进行大量调整，并且它可能变得足够复杂而不值得. 此解决方案具有在每行文本的末尾为省略号保留空间的效果，这似乎并不理想。似乎有一些其他解决方案可以解决这个问题，但我自己没有使用过其中的任何一个（包括今天以外的这个）。

第二部分（检测溢出）似乎更直接，由divRef.current.scrollHeight > divRef.current.offsetHeight. 我通过找到许多关于基于宽度的类似条件的参考来找到这个解决方案。在研究这个答案时，我没有在今天以外亲自使用过这种技术，因此具有更深入 CSS 专业知识的人可能会附和说“你不应该这样做，因为......”，但它似乎有效（我还没有这样做任何重要的浏览器测试——仅在 Chrome 上尝试过）。

为了语法方便，我在示例中使用了钩子，因此如果您不使用 alpha，则需要将状态、引用和效果工作转换为相应的类对应物。这也不是当前处理调整窗口大小的问题，这需要重新评估工具提示是否应该有效。有了这些警告，希望这将为您提供一些可行的解决方案。

这是代码：

import React, { useRef, useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Tooltip from "@material-ui/core/Tooltip";
import { withStyles } from "@material-ui/core/styles";
/* 
CSS from http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ 
Additional syntax help from /sf/ask/2867618421/
*/
const styles = theme => ({
  listItem: {
    maxWidth: "20rem",
    overflow: "hidden",
    position: "relative",
    lineHeight: "1.2em",
    maxHeight: "2.4em",
    textAlign: "justify",
    marginRight: "-1em",
    paddingRight: "1em",
    borderBottom: "1px solid",
    marginBottom: "0.5em",
    "&&:before": {
      content: '"..."',
      position: "absolute",
      right: 0,
      bottom: 0
    },
    "&&:after": {
      content: '""',
      position: "absolute",
      right: 0,
      width: "1em",
      height: "1em",
      marginTop: "0.2em",
      background: "white"
    }
  }
});
const data = [
  "Some short text",
  "Some text that is a little bit longer",
  "Some text that will need to wrap but still fits on two lines",
  "Some text that will overflow because it is more than just two lines worth when the maxWidth is set at 20rem.",
  "A massive range of hammer drill machines and rotary hammers for SDS-plus accessory tools, designed for higher performance drilling and longer life - for easy drilling in concrete and other materials."
];
const TooltipDiv = props => {
  const divRef = useRef(null);
  const [allowTooltip, setAllowTooltip] = useState(false);
  useEffect(() => {
    if (
      !allowTooltip &&
      divRef.current.scrollHeight > divRef.current.offsetHeight
    ) {
      setAllowTooltip(true);
    }
  }, []);
  if (allowTooltip) {
    return (
      <Tooltip title={props.text}>
        <div ref={divRef} className={props.className}>
          {props.text}
        </div>
      </Tooltip>
    );
  }
  return (
    <div ref={divRef} className={props.className}>
      {props.text}
    </div>
  );
};
function App(props) {
  return (
    <>
      {data.map(text => {
        return (
          <>
            <TooltipDiv text={text} className={props.classes.listItem} />
          </>
        );
      })}
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

你可以在这里看到它的实际效果：