Реакция - усеченная уценка - PullRequest
Новая
       4

Реакция - усеченная уценка

0 голосов
/ 13 марта 2020

У меня есть строка с текстом разметки ("**Bold** *Italic*"), и мне нужно, чтобы она отображалась в React. Это само по себе достаточно просто, я могу просто использовать модуль react-markdown и вуаля.

Мне нужно, чтобы текст занимал только 1 строку, если больше, то он должен быть усечен с помощью многоточия. Для этого сам по себе я бы использовал react-truncate.

. Проблема в том, что, когда я комбинирую использование этих двух модулей, все форматирование уценки (жирный и курсив) исчезает. Он просто отображается в виде простого текста в span.

Как отобразить уценку во время усечения в React?

Это мой код: 

<Truncate lines={1}>
  <ReactMarkdown source={"**Bold** *Italic*"} />
</Truncate>

1 Ответ

1 голос
/ 13 марта 2020

Если это одна строка, Trauncuate может быть излишним, я предлагаю css решение: 

#test{
  width: 300px;  
  padding: 10px;
  border: 1px solid #aaa;
  resize: both;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div id="test" >
  Hello world <b>Hello world</b> Hello world <i>Hello world</i> Hello world <b>Hello world</b> 
</div>
...