Многострочная текстовая область ReactJS с многоточием

Question

Я пытаюсь создать компонент с многострочным текстовым полем. Если введенный текст превышает 2 строки, я хотел бы добавить многоточие (...) для переполнения текста.

Как мне этого добиться, просто манипулируя css, чтобы показывать многоточие только на дисплее, но не изменять фактический текст, который будет сохранен, чтобы он содержал '...'?

Я использую этот компонент React ссылка

Спасибо

Answer 1

Javascript для этого может выглядеть примерно так: Вы берете значение, разбиваете его на строки и, если есть более одной строки, заключаете следующие строки в скобки.

Компонент React, который вы используете, похоже, получает onChange проп, который может использовать аналогичную функцию.

const textAreaElement = document.getElementById('t')

textAreaElement.addEventListener('keyup', () => {
  const value = textAreaElement.value.replace(/[\(\)]/g, '')
  const splitLines = value.split(/(?:\r\n|\r|\n)/)
  
  const newValue = splitLines.length > 1 ?
    `${splitLines[0]}\n(${splitLines.slice(1, splitLines.length).join('\n')})` : splitLines[0]
  
  textAreaElement.value = newValue;
  
});

<textarea id="t"></textarea>

Answer 2

Простая реализация многострочного многоточия будет использовать и типографский компонент . Вы можете предоставить реквизит с именем ellipsis со значением числа строк, после которого он должен быть усечен.

<Paragraph ellipsis={{ rows: 3, expandable: true }}>
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
</Paragraph>

Answer 3

только для CSS, вы можете использовать линейный зажим, хотя он не имеет лучшей поддержки браузера

Проверьте это codepen для реализации.

  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;