React-Truncate markdown

Question

我有一些降价文字的字符串（"**Bold** *Italic*"），我需要在React中呈现它。这本身很简单，我可以只使用react-markdown模块，瞧。

我需要文本仅跨1行，如果超过该行，则应将其用省略号截断。为此，我将使用react-truncate。

问题是，当我结合使用这两个模块时，所有的降价格式（粗体和斜体）都消失了。它只是在span中呈现为纯文本。

我如何在React中将markdown截断时渲染？

到目前为止，这是我的代码：

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

Answer 1

如果是一行，则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>

Answer 2

react-truncate仅适用于纯文本，不适用于JSX标记。所以我建议使用react-truncate-markup。使用

通过npm安装

npm install react-truncate-markup

然后将其用作

import TruncateMarkup from "react-truncate-markup";
import ReactMarkdown from "react-markdown";

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