проверка того, сколько строк улавливает текст

Question

Как я могу проверить, сколько строк занимает визуализированный текст, независимо от того, отображается он на большом или маленьком экране?

В приведенном ниже компоненте я хочу показать элемент привязки только в том случае, если текст имеет 3 строк.

import React from 'react';

type contentProps = {
  content: string,
};

function subString(string: string): string {
  return string.substring(0, string.length / 2);
}

export const Content = ({ content }: contentProps) =>
  content ? (
    <p className="content">
      {subString(content)}
      <a href="#">See More</a>
    </p>
  ) : null;

Каким должен быть поток? Сначала мне нужно визуализировать компонент. Во-вторых, проверить, занимает ли он 3 строки, и после этого изменить состояние?