title: React - Truncate markdown
body: <p>I have a string of some markdown text in it (<code>"**Bold** *Italic*"</code>) and I need it to be rendered in React. This itself is simple enough, I can just use the <code>react-markdown</code> module and voila.</p>
  
  <p>I need the text to only span 1 line, if more than that then it should be truncated with an ellipsis. For this on its own I would use <code>react-truncate</code>.</p>
  
  <p>The problem is that when I combine the use of these 2 modules, all of the markdown formatting (bold and italics) is gone. It just renders as plain text in a <code>span</code>.</p>
  
  <p>How do I render markdown whilst truncating it in React?</p>
  
  <p>This is my code so far:</p>
  
  <pre><code>&lt;Truncate lines={1}&gt;
    &lt;ReactMarkdown source={"**Bold** *Italic*"} /&gt;
  &lt;/Truncate&gt;
  </code></pre>