daohoangson / flutter_widget_from_html

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
https://pub.dev/packages/flutter_widget_from_html
MIT License
626 stars 230 forks source link

Max-width breaks texts in the middle of words #817

Open DFelten opened 2 years ago

DFelten commented 2 years ago

There is a problem with the inline css style max-width. Texts are wrapped here in the middle of the word. In the browser the width is respected, but ignored if a word is too long.

Steps to Reproduce

HTML ```html Zum 8GB Deal ```
`HtmlWidget` configuration ```dart class CustomHtmlWidget extends StatelessWidget { const CustomHtmlWidget(); @override Widget build(BuildContext context) { return CustomScrollView(slivers: [ const SliverToBoxAdapter(), HtmlWidget( htmlCode, renderMode: RenderMode.sliverList, ), ]); } } ```
Tesing environment ``` [✓] Flutter (Channel stable, 3.3.0, on macOS 12.5.1 21G83 darwin-arm, locale de-DE) • Flutter version 3.3.0 on channel stable at /Users/danielfelten/development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ffccd96b62 (10 days ago), 2022-08-29 17:28:57 -0700 • Engine revision 5e9e0e0aa8 • Dart version 2.18.0 • DevTools version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/danielfelten/Library/Android/sdk • Platform android-33, build-tools 33.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13F100 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Ultimate Edition (version 2022.2) • IntelliJ at /Applications/IntelliJ IDEA.app • Flutter plugin version 69.0.5 • Dart plugin version 222.3345.108 [✓] VS Code (version 1.72.0-insider) • VS Code at /Applications/Visual Studio Code - Insiders.app/Contents • Flutter extension version 3.48.0 [✓] Connected device (3 available) • iPhone 13 Pro (mobile) • 41BCC980-BEE9-4437-B937-6D966834D94F • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.5.1 21G83 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.102 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

Expected results

Result in the browser

189178099-f75d5bcb-d97a-4b3d-a454-76038f1fadad

Actual results

Result in the flutter app

CleanShot 2022-09-09 at 09 11 02

daohoangson commented 2 years ago

The size constraints are taken quite literally, that's why the text is forced into multiple lines like your screenshot 😅 Let me see what can be done.