for component of chakra-ui
chakra-ui Tag

I’m looking for a way to split the content of the tag into more lines, if:

• it has more than 16 chars, it split into 2 rows
• if it has more than 34 chars, instead of splitting into three rows, it truncate the element

I have this code:

<Td data-testid="elements">
      {elements.map((element: ElementMetaData) => (
        <Tooltip
          aria-label={element?.name || 'Unnamed'}
          key={element?.id}
          label={element?.name || 'Unnamed'}
        >
          <Link
            href={`/workspace/${orgId}/elements/` + element.id}
          >
            <Tag
              _hover={{
                bgColor: 'gray.100',
                borderRadius: '6px',
                border: '1px solid var(gray.400)'
              }}
              _focus={{ 
                bgColor: 'gray.200',
                borderRadius: '6px',
                border: '2px solid var(cyan.400)' }}
              _pressed={{ bgColor: 'gray.500' }}
              bgColor="gray.200"
              border="1px solid #E0E7FF"
              border-radius="6px"
              fontSize="10px"
              ml={0.5}
              p={1.5}
              size="sm"
              lineHeight={3}
              style={{ cursor: 'pointer' }}
            >
              {element?.name && element?.name.length > 34
                ? truncate(element.name, { length: 34 })
                : element?.name}
            </Tag>
          </Link>
        </Tooltip>
      ))}
    </Td>

That is rendered like this: