C# Embedded Browser ignores CSS Wordwrap

Question

I have primary login page that we access and bring into an embedded browser. I am attempting to get the words to wrap properly on the page.

We have CSS class attached to the html elements coming through but the word wrap seems to be ignored. I have an inclination that this is a property of the Web Control that can be set. The word wrap does not seem to think it needs to be wrapped at all. The background color works just fine.

We have a flex property on the parent CSS which I tried removing but that did not seem to work.

HTML section

    <div class="words">         
      <p class="test">ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</p>
      <p class="test"><a href='about.asp' target='_blank'>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</a></p>
    </div> 

CSS Entries

.words {
  flex: 0 1 auto;
  .corporateFontFamily;

  padding: 0 50px 20px 0;
  word-wrap:break-word;
}

.test {
    word-wrap: break-word;
    background-color: #4286f4;
}

XAML

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
        <Grid x:Name="LayoutRoot" Height="550" Width="600">
      <WebBrowser x:Name="EmbeddedBrowser" MinHeight="20" MinWidth="20" 
                            Height="550" Width="650" 
                            Navigated="EmbeddedBrowserLoadCompleted"
                            Margin="0,0,0,0" 
                            ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                            ScrollViewer.VerticalScrollBarVisibility="Hidden" 
                            ScrollViewer.IsDeferredScrollingEnabled="False" 
                            ScrollViewer.CanContentScroll="False"
                            >
      </WebBrowser>
    </Grid>
  </Grid>
</AppCore:DialogViewBase>

What the page looks like. You can see the Salmon colored entries spill off the page. Why would the word wrap be ignored?

Answer 1

The WebBrowser control uses older Internet Explorer (IE7) by default.

You can override that behavior with special markup in your webpage's header or with a registry setting, as explained at:

https://blogs.msdn.microsoft.com/patricka/2015/01/12/controlling-webbrowser-control-compatibility/