Thiết kế website giá rẻ

Question

I Have this WebView:

<code><WebView

javaScriptEnabled={true}

injectedJavaScript ={webViewScript}

domStorageEnabled={true}

automaticallyAdjustContentInsets={false}

scalesPageToFit={false}

style={{height:webviewHeight}}

onMessage={event => {

setWebViewHeight(parseInt(event.nativeEvent.data));

}}

source={{html: `

<!DOCTYPE html>

<html>

<head>

</head>

<body>

${e["message"]["mess"].message}

</div>

</body>

</html>

`}} />

</code>

<code><WebView javaScriptEnabled={true} injectedJavaScript ={webViewScript} domStorageEnabled={true} automaticallyAdjustContentInsets={false} scalesPageToFit={false} style={{height:webviewHeight}} onMessage={event => { setWebViewHeight(parseInt(event.nativeEvent.data)); }} source={{html: ` <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div style="white-space: pre-line; background-color:red;"> ${e["message"]["mess"].message} </div> </body> </html> `}} /> </code>

<WebView
                        
                        javaScriptEnabled={true}
                        injectedJavaScript ={webViewScript}
                        domStorageEnabled={true}
                        automaticallyAdjustContentInsets={false}
                            scalesPageToFit={false}
                            style={{height:webviewHeight}} 
                         onMessage={event => {
                            setWebViewHeight(parseInt(event.nativeEvent.data));
                          }}
                         source={{html: `
                         <!DOCTYPE html>
                            <html>
                            <head>
                            <meta name="viewport" content="width=device-width, initial-scale=1" />
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
                            </head>
                            <body>
                                    <div style="white-space: pre-line; background-color:red;"> 
                         
                                            ${e["message"]["mess"].message}
                         
                                    </div>
                            
                            </body>
                        </html>     
                                    
                                    `}} />

e[“message”][“mess”].message contains this text from the database:

<code>Gghhhh

Hhhhjj

<a href="https://music.youtube.com/watch?v=OhnX77XVCmg&si=NmivfKlttLs_2hZI" target="_blank">music.youtube.com</a>

</code>

<code>Gghhhh Hhhhjj <a href="https://music.youtube.com/watch?v=OhnX77XVCmg&si=NmivfKlttLs_2hZI" target="_blank">music.youtube.com</a> <div style="background-color:#000000;border-radius:20px;webkit-border-radius: 20px;-moz-border-radius: 20px;padding:0;margin:0;"><iframe style="background-color:#000000;padding:0;margin:0;border-radius:10px;width:100%;height:200px;" src="https://www.youtube.com/embed/75fDo2yk6RM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> </code>

Gghhhh

Hhhhjj

<a href="https://music.youtube.com/watch?v=OhnX77XVCmg&si=NmivfKlttLs_2hZI" target="_blank">music.youtube.com</a>

<div style="background-color:#000000;border-radius:20px;webkit-border-radius: 20px;-moz-border-radius: 20px;padding:0;margin:0;"><iframe style="background-color:#000000;padding:0;margin:0;border-radius:10px;width:100%;height:200px;" src="https://www.youtube.com/embed/75fDo2yk6RM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

But I get these white spaces at the top and bottom of the div element show in the image:

See before the GgHhhh and after the toytube video i get the extra white space.

Thiết kế website giá rẻ

Danh mục

Html div adds white space at top and bottom when using “white-space: pre-line” and adding this to the React Native WebView source