0

I have a textarea. I want to show my text real time when user is typing. but new lines and free spaces is ignored. I'm using html-react-parser library.

import parse from 'html-react-parser';


  return (
    <div className="card-postal-main-picture-wrapper">
      
      <div className="card-postal-main-picture">
        <img
          src="/img/card-postal-picture.png"
          alt=""
          className="main-picture"
        />
        <div className="card-postal-text" style={{ textAlign }}>
          {textes.map(item => {
            return (<span style={{ fontFamily: newFontName }}>
              {item.text?parse(item.text):""}</span>)
          })}
        </div>
      </div>
    </div>
  );
};

enter image description here

S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254
  • so what is your problem here? – Omri Attiya Oct 30 '21 at 12:37
  • 1
    `whiteSpace: 'pre-line'` or `whiteSpace: 'pre-wrap'` in the `span` should do the job. Add your `textes` array to the question for a more proper answer. If each element of `textes` represents a line then you just need to add `
    ` after `span` (and wrap them in a `Fragment`).     – brc-dd Oct 30 '21 at 12:55
  • @OmriAttiya spaces and new lines do not showing. – S.M_Emamian Oct 30 '21 at 12:57
  • so does normal HTML. if you want a break line use `
    ` and if you want extra space you can use `&nbsp`     – Omri Attiya Oct 30 '21 at 12:58
  • @brc-dd Your answer is correct. – S.M_Emamian Oct 30 '21 at 13:02
  • @OmriAttiya no your suggestion won't work (directly at least). Adding text like that in react automatically escapes the special characters. It will basically render a `
    ` text on the screen instead of rendering the tag. One needs to use `dangerouslySetInnerHTML` prop for that, or better a parser library to convert html string to JSX element.     – brc-dd Oct 30 '21 at 13:03
  • 1
    Does this answer your question? [Render a string in HTML and preserve spaces and linebreaks](https://stackoverflow.com/questions/9492249/render-a-string-in-html-and-preserve-spaces-and-linebreaks) – brc-dd Oct 30 '21 at 13:04

0 Answers0