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

是否可以创建一个React组件，该组件可以在两行之后添加省略号，并且仅当文本被包装时才显示工具提示

我已经用“noWrap”属性和附加的CSS自定义了MaterialUI的排版组件，但是失败了

请协助，我想实现如下屏幕：

---

您只需使用CSS即可完成以下任务：

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

---

您还可以查看更多资源/备选路线。

此问题有两个主要方面：

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

我不相信弗兰克兹的解决方案会显示省略号。据我所知，

文本溢出：省略号

仅适用于需要将文本限制为一行的水平溢出

我找到了一个在垂直溢出上使用省略号的解决方案，但一旦你开始在材质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);

import React，{useRef，useState，useffect}来自“React”；
从“react dom”导入react dom；
从“@material ui/core/Tooltip”导入工具提示；
从“@material ui/core/styles”导入{withStyles}”；
/* 
CSS来自http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ 
来自的其他语法帮助https://stackoverflow.com/questions/40965977/cant-target-before-pseudo-selector-in-jss
*/
常量样式=主题=>({
列表项：{
最大宽度：“20rem”，
溢出：“隐藏”，
职位：“相对”，
线宽：“1.2米”，
最大高度：“2.4em”，
textAlign:“证明”，
边沿右侧：“-1em”，
paddingRight:“1em”，
边框底部：“1px实心”，
marginBottom：“0.5em”，
“&&:before”：{
内容：“…”，
位置：“绝对”，
右:0,，
底部：0
},
“&&:after”：{
内容：“”“”，
位置：“绝对”，
右:0,，
宽度：“1米”，
高度：“1米”，
marginTop：“0.2米”，
背景：“白色”
}
}
});
常数数据=[
“一些短文本”，
“有些文字稍微长一点”，
“一些需要换行但仍适合两行的文本”，
“某些文本将溢出，因为当maxWidth设置为20rem时，它的值超过两行。”，
SDS及附属工具的大量锤式钻床和旋转锤，设计用于更高性能的钻孔和更长的使用寿命，便于在混凝土和其他材料中钻孔
];
常量工具提示div=props=>{
const divRef=useRef（null）；
常量[allowTooltip，setAllowTooltip]=useState（false）；
useffect（（）=>{
如果(
！allowTooltip&&
divRef.current.scrollHeight>divRef.current.offsetHeight
) {
setAllowTooltip（真）；
}
}, []);
如果（allowTooltip）{
返回(
{props.text}
);
}
返回(
{props.text}
);
};
功能应用程序（道具）{
返回(
{data.map（text=>{
返回(
);
})}
);
}
const StyledApp=带有样式（样式）（应用程序）；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

你可以在这里看到它的作用：