-
Notifications
You must be signed in to change notification settings - Fork 27.8k
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.
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
Add TextOverflow "ellipsisStart" , "ellipsisMiddle" and "ellipsisEnd" #45336
Comments
As I said in #47543 I suggest |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
Give it a 👍🏻 (as they prioritize based on thumbs up count) and hope someone will get to fix it. |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
Here is the link for the Truncation property of Label, it is called line break and you can set it as "Truncate Head", "Truncate Middle", and "Truncate Tail". In flutter it only implements "Truncate Tail" and not the others. https://developer.apple.com/documentation/swiftui/text/truncationmode/middle |
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
https://pub.dev/packages/extended_text support this feature now. you can define it as following: enum TextOverflowPosition {
start,
middle,
end,
} ExtendedText(
overflowWidget: TextOverflowWidget(
position: TextOverflowPosition.end,
align: TextOverflowAlign.center,
// just for debug
debugOverflowRectColor: Colors.red.withOpacity(0.1),
child: Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('\u2026 '),
InkWell(
child: const Text(
'more',
),
onTap: () {
launch(
'https://github.com/fluttercandies/extended_text');
},
)
],
),
),
),
) |
@zmtzawqlp |
Extended Text doesn't support Flutter Master Channel so this isn't a successful work around for everyone: Would be nice if TextOverflow had "ellipsisStart", "ellipsisMiddle", and "ellipsisEnd" and would just be passed to Text.overflow
|
I think this should be a standard feature, not needing 3rdparty packages. |
This comment was marked as off-topic.
This comment was marked as off-topic.
@TahaTesser I believe this feature could be very important for desktop as it deals with file paths much more than mobile |
Someone has to do a pull request on the flutter channel for this feature I guess! |
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
For Now this is the only solution available: https://stackoverflow.com/questions/71502532/flutter-text-overflow-at-beginning-of-sentence/71504034#71504034 |
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as spam.
This comment was marked as spam.
The HTML renderer for the web platform is unlikely to be able to support this feature (there does not seem to be a CSS equivalent). |
Determining the ellipsis styleSkParagraph currently does iterative shaping to determine the style of the text style of the ellipsis. Interestingly it seems UIKit, even with the .byTruncatingMiddle option, has a similar behavior: UIKit code demonstrating that the first ellipsized (logical?) character determines the style let colors : [UIColor] = [.red, .green, .blue, .yellow, .orange]
let bgColors : [UIColor] = [.white, .lightGray]
for i in 0 ..< growingText.length {
let font = UIFont.systemFont(
ofSize: 20.0 + CGFloat(i),
weight: .regular,
width: i % 2 == 0 ? .compressed : .expanded)
growingText.addAttribute(.font, value: font, range: NSRange(location: i, length: 1))
growingText.addAttribute(.foregroundColor, value: colors[i % colors.count], range: NSRange(location: i, length: 1))
growingText.addAttribute(.backgroundColor, value: bgColors[i % bgColors.count], range: NSRange(location: i, length: 1))
} Ellipsized text with On the other hand Pango and Android do not do that. This would mean that the Upon further inspection, TextKit2 (which uses a private coretext function `CTLineCreateTruncatedLineWithTokenHandler`) seems to make some strange ellipsizing choices in some test cases.Ellipsizing Across Bidi Boundaries let A = "A"
let alef = "ا"
let bidiText = ""
+ String(repeating: A, count: 1)
+ String(repeating: alef, count: 5)
+ String(repeating: A, count: 6)
let colors : [UIColor] = [.red, .green, .blue, .yellow, .orange]
for i in 0 ..< bidiText.length {
bidiText.addAttribute(.foregroundColor, value: colors[i % colors.count], range: NSRange(location: i, length: 1))
} This is the render results of the string show above, in a special font where "A" looks like ▶ (for LTR) and "ا" looks like ◀ (for RTL). Here's the result if the max width is set to 200 and So
|
This issue is assigned to @LongCatIsLooong but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks! |
I'm shocked this is not supported already and not being addressed. |
Use case
When displaying file-paths, I'd prefer to show the file-name and clip the file-path.
In this example, it's not possible to see the filenames:
Proposal
Allow TextOverflow to clip text on the leading edge rather than the trailing edge.
Internal bug - b/180975303
The text was updated successfully, but these errors were encountered: