I try to recreate the ellipsis components in naive-ui css library for vue3, here are the source code and demo codesandbox

https://github.com/tusen-ai/naive-ui/blob/main/src/ellipsis/src/Ellipsis.tsx

https://codesandbox.io/s/pne1kq

I spent a lot of time watching the source code, for now I figure out most of the source code. But one thing I can't trace is where s the logic they judge how long should make the tooltip appeared and make the text to have ... at the end.

Can someone help trace which part the logic exist in the above link ?

CodePudding user response：

The ... is set through style declarations on the parent element. Look at the computed property ellipsisStyleRef, particularly where the value of textOverflow is set (line 66):

export default defineComponent({
  ...
  setup (props, { slots, attrs }) {
    ...
    const ellipsisStyleRef = computed(() => {
      const { lineClamp } = props
      const { value: expanded } = expandedRef
      if (lineClamp !== undefined) {
        return {
          textOverflow: '',
          '-webkit-line-clamp': expanded ? '' : lineClamp
        }
      } else {
        return {
          textOverflow: expanded ? '' : 'ellipsis',  // <------------- here
          '-webkit-line-clamp': ''
        }
      }
    })

As to length, I am not sure if you mean width or duration. But it looks like there is no duration, the tooltip is show as long as mouse hovers over trigger, and width does not seem to be restricted.