0

I am using React to create webpage and using data field as yaml. I need to put long paragraph in React using yaml. But I could not add new line by yaml.

- subtitle: Add new line
  content: |
    I want to add new line here

    but | or > or <br> does not work

and my output is

enter image description here

How can I add new line between two sentence?

Jonah KIM
  • 23
  • 3
  • "What's a newline?" because in the context of text in a web view, there are no newlines "in text", that's a separator of two separate pieces of text content. So if you need a line break, you don't: your field is not one one text, it's two texts, and you'll want to capture it in two fields, not a single field. – Mike 'Pomax' Kamermans Jul 05 '23 at 17:01
  • Newline like "\n". Oh I tried as in one text as "I want to add new line here. but | or > or
    does not work." but I could not make a new line between two sentences. two fields mean that do I need to create as contents1: and contents2:?     – Jonah KIM Jul 05 '23 at 17:04
  • Yeah, I was pointing out that "there is no such thing as a newline on a webpage". They get ignored entirely. If your content is two parts text separated by a line break, that's _two_ texts, not one, and your React should render it inside two separate elements that you can style such that they follow one another in the way you need it to look. The same goes for using `
    ` to get content to break: it's a holdover from decades ago, don't use `
    `, properly tag your content (e.g. in spans) and then assign CSS that effects the typesetting you need.     – Mike 'Pomax' Kamermans Jul 05 '23 at 17:08
  • (and then of course you _can_ do is on the CSS force a newline by telling the browser to apply preformatted parsing to just the single line feed character, e.g. https://stackoverflow.com/a/4609491/740553 - but it still requires properly marking up the two separate pieces of text _as_ two separate pieces of text. Because your data is two paragraphs, not one) – Mike 'Pomax' Kamermans Jul 05 '23 at 17:16
  • or If I make an array per paragraph in yaml and iterate in React? Do you think is it possible? – Jonah KIM Jul 05 '23 at 17:35
  • absolutely, if you need text that might change to a different number of paragraphs, then an array is a fine choice and should work as needed. – Mike 'Pomax' Kamermans Jul 05 '23 at 18:06

0 Answers0