[FlexJS] Unexpected TextButton word wrapping

[Josh Tynjala <jo...@gmail.com>]

I noticed that the default behavior for a TextButton is kind of weird.
Depending on how long the text is and how large the font size, it starts
wrapping to the next line for no particular reason. You don't even need to
set the width or max-width. This doesn't look great, and I found it
unintuitive.

I found that adding the following CSS for TextButton ensured that the text
doesn't wrap by default:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

If the width or max-width of the button is set, the text will be truncated
with ellipsis (...) if it's too long.

This seems like a better default to me. If we wanted to make it easy to
enable wrapping, maybe we could expose the white-space through
SimpleCSSStyles. Setting it to "normal" instead of "nowrap" will re-enable
wrapping, if that's what is desired.

- Josh

Re: [FlexJS] Unexpected TextButton word wrapping

[Alex Harui <ah...@adobe.com>]

Sounds ok to me.  We are using nowrap on Label already.

On 12/2/16, 4:22 PM, "Josh Tynjala" <jo...@gmail.com> wrote:

>I noticed that the default behavior for a TextButton is kind of weird.
>Depending on how long the text is and how large the font size, it starts
>wrapping to the next line for no particular reason. You don't even need to
>set the width or max-width. This doesn't look great, and I found it
>unintuitive.
>
>I found that adding the following CSS for TextButton ensured that the text
>doesn't wrap by default:
>
>white-space: nowrap;
>overflow: hidden;
>text-overflow: ellipsis;
>
>If the width or max-width of the button is set, the text will be truncated
>with ellipsis (...) if it's too long.
>
>This seems like a better default to me. If we wanted to make it easy to
>enable wrapping, maybe we could expose the white-space through
>SimpleCSSStyles. Setting it to "normal" instead of "nowrap" will re-enable
>wrapping, if that's what is desired.
>
>- Josh