Set the text – overflow: ellipsis; After that, judge whether it is too long by mouse when moving in, and give feedback hints (hover title, etc.). First, we need to specify several attributes of the element:

Element. ClientWidth:

This property is zero for inline elements and elements without CSS; Otherwise, it is the internal width (in pixels) of the element. It includes padding, but not border, margin, and vertical scrollbars (if present).

Element. ScrollWidth:

The width of an element’s content, including overflow content (the part not visible on screen: overflow).

The scrollWidth value is equal to the minimum width required for the element to fit all the contents of the viewport without using horizontal scrollbars. Width is measured in the same way as clientWidth: it includes the element’s pading, but not its border, margin, and vertical scrollbar (if present). It can also include the width of pseudo-elements, such as ::before or ::after. If the contents of an element can be accommodated without a horizontal scroll bar, scrollWidth is equal to clientWidth

HTMLElement.offsetWidth

The layout width of an element, including any border, padding, and vertical scrollbar (if rendered). This does not include the widths of pseudo-elements, such as ::before or ::after.

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .div1 {
      height: 100px;
      width: 100px;
      border: 2px solid;
      margin: 10px;
      padding: 9px;
    }

    .div2 {
      height: 100px;
      width: 100px;
      overflow: auto;
      border: 2px solid;
      margin: 10px;
      padding: 9px;
    }

  </style>
  <script>
    window.onload = function () {
      const ODiv1 = document.getElementsByClassName('div1') [0]
      const ODiv2 = document.getElementsByClassName('div2') [0]
      const ODiv2inner = document.getElementsByClassName('div2inner') [0]
      console.log('[div1 clientWidth , div2 clientWidth]:', ODiv1.clientWidth, ODiv2.clientWidth)
      console.log('[div1 scrollWidth , div2 scrollWidth]:', ODiv1.scrollWidth, ODiv2.scrollWidth)
      console.log('[div1 offsetWidth , div2 offsetWidth]:', ODiv1.offsetWidth, ODiv1.offsetWidth)
      console.log('height related')
      console.log('[div1 clientHeight , div2 clientHeight]:', ODiv1.clientHeight, ODiv2.clientHeight)
      console.log('[div1 scrollHeight , div2 scrollHeight]:', ODiv1.scrollHeight, ODiv2.scrollHeight)
      console.log('[div1 offsetHeight , div2 offsetHeight]:', ODiv1.offsetHeight, ODiv2.offsetHeight)

      console.log('Div2inner width correlation')
      console.log('div2inner clientWidth:', ODiv2inner.clientWidth)
      console.log('div2inner scrollWidth:', ODiv2inner.scrollWidth)
      console.log('div2inner offsetWidth:', ODiv2inner.offsetWidth)

    }
  </script>
</head>

<body>
  <div class="div1">Div1 element</div>

  <div class="div2">
    <div class="div2inner">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</body>

</html>
Copy the code

Div2 inner scrollWidth plus div2 padding-left, padding-right void; This can be handled by setting div2inner’s display: inline-block; margin: 0 10px; To achieve the same effect. Or div2Inner only sets the super-long part to hide overflow: hidden;

We want to hide the long parts and do the hint, so we should set the inner element overflow: hidden; Then check whether the inner element’s scrollWidth + outer element’s padding is greater than the outer element’s offsetWidth. When it is greater than, feedback prompts such as title will be made. Use the React and ANTD component libraries to encapsulate components:

import { FC, useState } from 'react';
import classnames from 'classnames';
import { Tooltip } from 'antd';
import { TooltipPlacement } from 'antd/lib/tooltip';
import styles from './index.less';

interface IProps {
  value: string; className? : string; placement? : TooltipPlacement; stepWidth? : number;// padding and other subtracting values
}

const TextLong: FC<IProps> = ({ value, className, placement, stepWidth }) = > {
  const [visible, setVisible] = useState(false);

  const onMouseOver = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) = > {
    const currentWidth = e.currentTarget.scrollWidth + (stepWidth ?? 0);
    constparentWidth = e.currentTarget.parentElement? .offsetWidth ||0;

    if (currentWidth > parentWidth) {
      setVisible(true); }};const onMouseLeave = () = > {
    setVisible(false);
  };

  return (
    <Tooltip
      title={value}
      placement={placement}
      visible={visible ? undefined : false}
    >
      <div
        className={classnames(styles.content, className)}
        onMouseOver={onMouseOver}
        onMouseLeave={onMouseLeave}
      >
        {value}
      </div>
    </Tooltip>
  );
};

export default TextLong;

Copy the code
// index.less
.content {
  text-overflow: ellipsis;
  overflow     : hidden;
  white-space  : nowrap;
}
Copy the code