Question

我有一个带有更改div块的html页面。

当此块中出现新文本时，字体大小开始减小，这样整个文本就适合WebView。

我希望字体大小保持不变，而是在WebView中显示滚动条。

问题仅在移动设备上重现。

Html代码页：

<!DOCTYPE html>
<html>
   <head>
      <title>Problem with Page</title>
   </head>
   <body>
      <script>
         AddText = function (v) {
           var div = document.getElementById('TextContainer');

           div.innerHTML = div.innerHTML + v;
         };
      </script>
      <div style="font-size: 250%;" id="TextContainer"></div>
      <input type="submit" value="button" onClick="AddText(this.value)">
   </body>
</html>

Xaml代码页：

<Page
    x:Class="EvidentCalculator.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EvidentCalculator"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <WebView Margin="3,0,3,0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="150" x:Name="WebContainer"/>
        <Button Grid.Row="1" Content="Invoke script!" Click="BtnClick"/>
    </Grid>
</Page>

代码背后：

/// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();

            Loaded+=OnLoad;
        }

        private async void OnLoad(object sender, RoutedEventArgs e)
        {
            //TODO Need some code to load html into WebView!!!
        }

        private async void BtnClick(object sender, RoutedEventArgs e)
        {
            await WebContainer.InvokeScriptAsync("AddText", new[] { "Some test text" });
        }
    }

Answer 1

我已经测试了您的代码并重现了您的问题。问题是，当您添加＆＃34;按钮＆＃34;时，div块被拉长了。文本，它没有自动换行。为了使div块可以正常工作，您可以使用word-break:break-all创建样式。

<body>
    <script>
        AddText = function (v) {
            var div = document.getElementById('TextContainer');
            div.innerHTML = div.innerHTML + v;
        };
    </script>
    <div style="font-size: 250%;  word-break:break-all" id="TextContainer"></div>
    <input type="submit" value="button" onClick="AddText(this.value)" />
    <button id="btnClick" type="button" value="Some test" onclick="AddText(this.value)">Click Me </button>
</body>

如果您需要在WebView中使用滚动条在一行中显示文本并保留文本字体大小，则可以在样式中添加overflow-y:scroll。

<div style="font-size: 250%; overflow-y:scroll" id="TextContainer" ></div>

如何在移动设备上禁用UWP WebView中的内容？

1 个答案: