Space between two HTML tags

[LouisJS]

I've noticed that if you put a space between two HTML tags such as a space, it is interpreted as a content and insert a new line.

For Example: (Focus on the breaking lines, not styling)

render() {
  const htmlContent = `<p>Hello</p> <p>There</p>`;
  return (
     <HTMLView
        value={htmlContent}
     />
  );
}

It will render something like : (Two breaking lines)

When the render should be like : (One breaking line)

I think that in general, it's an issue about interpreting some content that are not between HTML Tags Take another HTML such as : const htmlContent = `<p>Hello</p>tot<p>There</p>`;

It renders like : (One breaking line)

While it should be something like : (Breaklines between each content)

[ducpt2]

+1 same issue.

[miniofskidev]

same here

[ducpt2]

@miniofskidev This did the magic for me: data.replace(/(\r\n|\n|\r)/gm, "")

[isilher]

Hi there! I think the main issue with your HTML examples is that the parts in between tags are not contained in any parent tag. This library expects valid HTML, which means everything should be wrapped in a single top level tag. Could you check if the expected result is achieved by wrapping your data string in for example a <div></div>?

[donni106]

Thanks @isilher, wrapping my content in a <div></div> did it for me.

[GodotVN]

@isilher Can you help me. How to remove line within p tag. Many thanks

[donni106]

@nguyenhuyhieu1995 there are probably new lines between you HTML tags, which normal browsers are ignoring but the HMTLView is not. I think you need a trim method, like @ducpt2 was mentioning, where rendering the HTMLView:

data.replace(/(\r\n|\n|\r)/gm, "")

<HTMLView
    value={`<div>${data.replace(/(\r\n|\n|\r)/gm, "")}</div>`}
    renderNode={renderNode}
/>

This is working for me.

[joaom182]

Same issue here, .replace(/(\r\n|\n|\r)/gm, "") not work for me :(

[rochapablo]

Any update on this?

[pacozaa]

+1

[pacozaa]

Guys I end up did something like this and seems to work

which basically just combine @isilher and @ducpt2 together

[danijelmaric]

+1

[fedebais]

the @donni106 codes is work for me but is not working for image.

if i add the label p, i get line break on label a . what can i do?