<div> not break lines

[SunnyEver0]

I have meet this problem, the html code

<div style="font-family: verdana, sans-serif; word-wrap: break-word;">As
    <div>A</div>
    <div>As</div>
    <div>A</div>
    <div>As</div>
    <div><br></div>
    <div>As</div>
    <div>D</div>
    <div>As</div>
    <div>D</div>
    <div>A</div>
    <div>As</div>
    <div><br></div>
    <div>A</div>
    <div>D</div>
    <div>A</div>
    <div>A</div>
    <div>D</div>
    <div><br></div>
</div>

but showed in this and in brower how to reslove this problem? thanks a lot.

[bas-ie]

Yep, this is a current bug. To more succinctly reproduce:

import React from 'react';
import HTMLView from 'react-native-htmlview'
import { StyleSheet, View } from 'react-native';

export default class App extends React.Component {
  render() {
    const htmlContent = `<div>Outer<div>Inner</div><div>Inner</div>Outer</div>`
    return (
      <HTMLView value={htmlContent} />
    )
  }
}

If you remove the outer div and instead pass an object with a style property to your HTMLView using textComponentProps, you can work around this for now (the inline style attribute on your outer div wouldn't have worked anyway):

    return (
      <HTMLView
        textComponentProps={{ style: styles.textComponent }}
        value={htmlContent} />
    )

// ...

const styles = StyleSheet.create({
  textComponent: {
    fontFamily: 'monospace'
  }
})

[SunnyEver0]

Firstly,I'm so glad u have understood my option with my poor English.Aha,according to use this method,I have fixed this problem.But if I remove the outer div,maybe to lost the style of the whole text and using regex to remove html code of <div>, I probably think it's too complex in the front-end.

[bas-ie]

Your English is fine :smile: I hope I can devote some time to fixing the nesting issue soon, but it definitely still wouldn't support the inline style. Hope you find an alternative solution.

[4mit]

how do we select a class and how do we define various selectors in stylesheet or style ??

<div class='main-container'>
          <div class='privacy-policy'><p>To view our privacy policy, scan the QR code below or visit https://abc.com/privacy-policy.</p></div>
      </div>

how do we select main-container here ??