flutter_html_css_text_overflow #

A flutter_html extension that renders the CSS text-overflow, white-space and -webkit-line-clamp properties. flutter_html 3.0.0 parses none of the three. It drops them from an inline style, long text wraps forever, and there is no error and no warning. A TagExtension-built element and an inline <span> take nothing from this extension.

Features #

• The extension writes the three properties into the element's Style, where flutter_html's own text rendering reads them.
• white-space: nowrap and -webkit-line-clamp on the same element conflict. nowrap wins.
• text-overflow and -webkit-line-clamp do not reach block descendants, as in CSS. white-space: pre still covers its subtree.
• !important on a declaration resolves.
• text-overflow: banana, -webkit-line-clamp: none and a zero or negative line count render nothing. There is no error and no warning.
• An element whose final inline style holds none of the three properties gets no change.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_text_overflow: ^0.2.0

Usage #

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

Html(
  data: '''
    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
      A long headline that gets cut off with an ellipsis
    </div>
  ''',
  extensions: const [CssTextOverflowHtmlExtension()],
);

Before you register it #

This extension matches on the inline style, never on the tag name. It cannot make flutter_html render a tag that has no renderer. A TagExtension does that.

Registration order does not matter. A utility-class extension writes the inline style at the preStyling step, and this extension reads it at the preProcessing step, which runs later.

A TagExtension discards these properties in either order. It builds its own widget and never reads a Style. There is no error and no warning. Set maxLines and overflow on the widget the builder returns.

Html(
  data: '<v-card style="text-overflow: ellipsis; white-space: nowrap;">Card</v-card>',
  extensions: [
    const CssTextOverflowHtmlExtension(),
    TagExtension(tagsToExtend: const {'v-card'}, child: const Text('Card')), // never truncates
  ],
);

An inline <span> cannot truncate. It contributes a TextSpan to its block ancestor's Text.rich and never builds one of its own. The properties on a <span> are never read, and there is no error and no warning. Put them on the block element.

Released flutter_html_bootstrap 0.1.1 and flutter_html_vuetify 0.1.0 do not recognise CssTextOverflowHtmlExtension. Both therefore still suppress the classes this extension could render. Write text-overflow and white-space into an inline style attribute instead of Bootstrap's .text-truncate or Vuetify's text-truncate and text-no-wrap.

Limitations #

• text-overflow on its own sets no line limit, and the extension synthesizes none. Browsers behave the same way.
• white-space: nowrap truncates instead of overflowing sideways. flutter_html exposes no softWrap, so a line limit of 1 is the closest reachable behaviour.
• pre, pre-wrap and pre-line all render the same way. flutter_html's WhiteSpace.pre keeps whitespace but still wraps, which is CSS pre-wrap.
• overflow-wrap: break-word already works, because Flutter breaks an overlong word. overflow-wrap: anywhere and word-break: break-all are unreachable from a Style.
• The extension does not read overflow. Real clipping needs a wrapper widget.
• The extension reads the inline style only. It does not read <style> blocks or stylesheets.

The full reasoning for each one is on the symbol that implements it.

Additional information #

Issues and merge requests go to the GitLab repository. The utility-class packages that emit the truncation classes are flutter_html_bootstrap and flutter_html_vuetify.

CI, publishing and Renovate are described in CONTRIBUTING.md.