javascript - React - chop Markdown

Question

我里面有一些 Markdown 文本的字符串(“**粗体** *斜体*”)，我需要它在 React 中渲染。这本身很简单，我只需使用 react-markdown 模块即可。

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

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

如何在 React 中渲染 Markdown 并 chop 它？

这是我到目前为止的代码:

<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>