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
645 stars 242 forks source link

`white-space: nowrap` not work on mobile if node content is URL #1355

Open aitsuki opened 1 week ago

aitsuki commented 1 week ago

white-space: nowrap not work on mobile if node content is URL, for example:

[
  HtmlWidget(
    '''white-space:nowrap not work: <a href="#">https://www.example.com</a>''',
    textStyle: TextStyle(fontSize: 16),
  ),
  HtmlWidget(
    '''but it works without slash: <a href="#">https:www.example.com</a>''',
    textStyle: TextStyle(fontSize: 16),
  ),
]

image

flutter_widget_from_html_core: 0.15.2 flutter sdk version: 3.24.4

_Originally posted by @aitsuki in https://github.com/daohoangson/flutter_widget_from_html/issues/944#issuecomment-2465434072_

daohoangson commented 1 week ago

What is your HtmlWidget configuration? How did you set the nowrap styling?

aitsuki commented 1 week ago

What is your HtmlWidget configuration? How did you set the nowrap styling?

Please look at the second URL http//:www.example.com, the colon appears after the slash, ant it works.

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Html Widget Smaple")),
      body: const Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
                "This is plain text. This is plain text. This is plain text. This is plain text. "),
            HtmlWidget(
                '''white-space:nowrap not work: <a href="#" style="white-space:nowrap">https://www.example.com</a>'''),
            HtmlWidget(
                '''white-space:nowrap xxx work: <a href="#" style="white-space:nowrap">https//:www.example.com</a>'''),
          ],
        ),
      ),
    );
  }
}

image