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

Question

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

我使用"noWrap“属性和附加的CSS对Material UI的排版组件进行了tried自定义，但失败了。

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

​

Answer 1

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

• 基于垂直溢出显示文本溢出的省略号，以便允许多行，但不允许unlimited
• Detect垂直溢出，并在这种情况下包括工具提示功能

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

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

第二部分(检测溢出)似乎更简单，由divRef.current.scrollHeight > divRef.current.offsetHeight处理。我找到了许多基于宽度的类似条件的参考，从而找到了这个解决方案。在这个问题上，我没有亲自使用过这种技术，所以对CSS有较深了解的人可能会说“你永远不应该那样做，因为……”，但它似乎是有效的(我没有做过任何重要的浏览器测试--只在Chrome上试过)。

为了语法方便，我在我的例子中使用了钩子，所以如果你不使用alpha，你需要将state，ref和effect的工作转换成对应的类副本。这也不是目前处理调整窗口大小，这将需要重新评估工具提示是否应该生效。有了这些警告，希望这将给你一些可行的解决方案的步骤。

代码如下：

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 https://stackoverflow.com/questions/40965977/cant-target-before-pseudo-selector-in-jss
*/
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);

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

​

​

Answer 2

您可以简单地使用CSS来完成此操作：

.tooltip {
    overflow: hidden;
    text-overflow: ellipsis;
    height: /* Just enough to show 2 lines */
}

你也可以在this上找到更多的资源/替代路线。