example/example.md

Example #

flutter_html 3.0.0 maps 51 CSS properties onto a Style and drops the rest. text-overflow, white-space and -webkit-line-clamp are three of the dropped ones. A long headline therefore wraps forever instead of ending in an ellipsis. This extension writes all three into the Style, where flutter_html's own text rendering reads them.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_text_overflow/flutter_html_css_text_overflow.dart';

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="overflow: hidden; text-overflow: ellipsis;
                          white-space: nowrap;">
                The CSS behind Bootstrap's .text-truncate: one line, then an
                ellipsis.
              </div>

              <div style="-webkit-line-clamp: 2; text-overflow: ellipsis;">
                A two-line clamp keeps the first two lines of a longer teaser
                and ellipsizes the rest of it away.
              </div>

              <div style="white-space: pre-wrap;">Spaces    and
newlines survive.</div>
            ''',
            extensions: const [CssTextOverflowHtmlExtension()],
          ),
        ),
      );
}

void main() => runApp(const ExampleApp());