8000 Ellipsis not working properly when a text overflows via constrained height instead of max lines · Issue #167466 · flutter/flutter · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Ellipsis not working properly when a text overflows via constrained height instead of max lines #167466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
rasitayaz opened this issue Apr 21, 2025 · 3 comments
Open

Ellipsis not working properly when a text overflows via constrained height instead of max lines #167466

rasitayaz opened this issue Apr 21, 2025 · 3 comments
Labels
a: typography Text rendering, possibly libtxt c: rendering UI glitches reported at the engine/skia or impeller rendering level found in release: 3.29 Found to occur in 3.29 found in release: 3.32 Found to occur in 3.32 framework flutter/packages/flutter repository. See also f: labels. fyi-text-input For the attention of Text Input team has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team

Comments

@rasitayaz
Copy link

Steps to reproduce

  1. Create a new Flutter project
  2. Paste the code sample into main.dart
  3. Run on any platform

Expected results

Ellipsis should show up at the end of the text if the text is cut off by its parent's constrained height, even if maxLines is null or a large value.

Actual results

Ellipsis shows up when maxLines is null, but then it trims the text into one line. Ellipsis does not show at all if maxLines is greater than what could normally fit in the constrained size.

Code sample

Code sample 
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final text =
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

    return Scaffold(
      appBar: AppBar(title: Text('Example')),
      body: Center(
        child: Column(
          spacing: 16,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Max lines: null'),
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Text(
                text,
                overflow: TextOverflow.ellipsis,
                maxLines: null,
              ),
            ),
            Text('Max lines: 100'),
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Text(
                text,
                overflow: TextOverflow.ellipsis,
                maxLines: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Image

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.29.3, on macOS 15.4 24E248 darwin-arm64, locale en-TR) [1,225ms]
    • Flutter version 3.29.3 on channel stable at /Users/rasitayaz/Library/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (10 days ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [2.9s]
    • Android SDK at /Users/rasitayaz/Library/Android/sdk
    • Platform android-35, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.5+-13047016-b750.29)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,023ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [11ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [11ms]
    • 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 21.0.5+-13047016-b750.29)

[✓] VS Code (version 1.99.2) [9ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.108.0

[✓] Connected device (4 available) [6.1s]
    • iPhone 16 Pro (mobile)          • 43146F92-4E65-4649-AE11-FE784D7ADBF8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-4
      (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.4 24E248 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.4 24E248 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 134.0.6998.167

[✓] Network resources [975ms]
    • All expected network resources are available.

• No issues found!
@maheshj01 maheshj01 added the in triage Presently being triaged by the triage team label Apr 22, 2025
@maheshj01
Copy link
Member

Hey @rasitayaz, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel. The text ellipses are not visible if the text height (specified by maxlines) exceeds the container height

Image
flutter doctor -v

master

[✓] Flutter (Channel master, 3.32.0-1.0.pre.90, on macOS 15.4 24E248 darwin-arm64, locale en-US) [30.8s]
    • Flutter version 3.32.0-1.0.pre.90 on channel master at /Users/mahesh/Development/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 29810cd6d1 (6 days ago), 2025-04-16 00:07:50 +0530
    • Engine revision 29810cd6d1
    • Dart version 3.8.0 (build 3.8.0-265.0.dev)
    • DevTools version 2.45.0-dev.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [3.0s]
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,760ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [129ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [128ms]
    • 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 21.0.5+-12932927-b750.29)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1) [127ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.96.2) [20ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available) [7.3s]
    • Pixel 7 (mobile)       • 33270DLH20012A                       • android-arm64  • Android 15 (API 35)
    • iPhone 16 Pro (mobile) • D4BBFF03-3CBE-4EA0-80E0-7629055FD9E0 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-18-4 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 15.4 24E248
      darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome
      131.0.6778.265

[✓] Network resources [1,465ms]
    • All expected network resources are available.

• No issues found!

stable

[!] Flutter (Channel stable, 3.29.3, on macOS 15.4 24E248 darwin-arm64, locale en-US) [591ms]
    • Flutter version 3.29.3 on channel stable at /Users/mahesh/Development/flutter
    ! Warning: `flutter` on your path resolves to /Users/mahesh/Development/flutter_master/bin/flutter, which is not inside your current
      Flutter SDK checkout at /Users/mahesh/Development/flutter. Consider adding /Users/mahesh/Development/flutter/bin to the front of
      your path.
    ! Warning: `dart` on your path resolves to /Users/mahesh/Development/flutter_master/bin/dart, which is not inside your current
      Flutter SDK checkout at /Users/mahesh/Development/flutter. Consider adding /Users/mahesh/Development/flutter/bin to the front of
      your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (5 days ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update
      checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.3s]
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,559ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [153ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [152ms]
    • 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 21.0.5+-12932927-b750.29)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1) [150ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.96.2) [22ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available) [6.5s]
    • iPhone 15 Pro (mobile)          • 7BB5BB29-BA56-4EB1-B698-E6A1AAD138E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.4 24E248 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.4 24E248 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 131.0.6778.265

[✓] Network resources [351ms]
    • All expected network resources are available.

! Doctor found issues in 1 category.

@maheshj01 maheshj01 added framework flutter/packages/flutter repository. See also f: labels. a: typography Text rendering, possibly libtxt c: rendering UI glitches reported at the engine/skia or impeller rendering level has reproducible steps The issue has been confirmed reproducible and is ready to work on team-framework Owned by Framework team found in release: 3.29 Found to occur in 3.29 found in release: 3.32 Found to occur in 3.32 and removed in triage Presently being triaged by the triage team labels Apr 22, 2025
@justinmc justinmc added the fyi-text-input For the attention of Text Input team label Apr 22, 2025
@justinmc
Copy link
Contributor

This is probably working as intended, but you could argue that it's not intuitive or hard to work around. Maybe we should let this issue gather feedback from other people that might encounter this.

@justinmc justinmc added P2 Important issues not at the top of the work list triaged-framework Triaged by Framework team labels Apr 24, 2025
@rasitayaz
Copy link
Author

It's definitely hard to work around, especially with variable device text sizes etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a: typography Text rendering, possibly libtxt c: rendering UI glitches reported at the engine/skia or impeller rendering level found in release: 3.29 Found to occur in 3.29 found in release: 3.32 Found to occur in 3.32 framework flutter/packages/flutter repository. See also f: labels. fyi-text-input For the attention of Text Input team has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@justinmc @maheshj01 @rasitayaz
0