972664 - element with display flex box doesn't respect text-overflow ellipsis

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Sterling Camden]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:26.0) Gecko/20100101 Firefox/26.0 (Beta/Release)
Build ID: 20131205075310

Steps to reproduce:

use flex box on a text only element with ellipsis


Actual results:

see the fiddle for what happened and what normally happens without flex:
http://jsfiddle.net/TS6VM/


Expected results:

see the fiddle for what happened and what normally happens without flex:
http://jsfiddle.net/TS6VM/

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report, and sorry for the delay in response.

The ACTUAL RESULTS you describe are actually the correct behavior. Basically, the spec requires the flex container to generate an anonymous wrapper-block to contain the raw text inside of it, and *that* anonymous block is what you'd need to set "text-overflow" on, for it to some effect. (But unfortunately, you can't directly style that block, because it's anonymous & can't be selected for.)

More details:
 - The text-overflow property "specifies rendering when inline content overflows its block container element".[1]
 - So, for it to have any effect here, you need to be setting it on the text's *block container*
 - Flex containers wrap "each contiguous run of text that is directly contained inside a flex container ...in an anonymous flex item" (an anonymous block).
 - That block is the text's block container.
 - And unfortunately, you can't directly style that block, because it's anonymous (and hence has no element that you could select for).

So, if you want to set text-overflow on text inside of a flex container, you need to actually wrap the text in a *real* block (e.g. a <div> child of the flex container), and specify "text-overflow" on *that*.

[1] http://dev.w3.org/csswg/css-ui/#text-overflow
[2] http://dev.w3.org/csswg/css-flexbox/#flex-items

Comment 2

[Daniel Holbert [:dholbert]]

Also: note that you'll get the exact same behavior (text-overflow seemingly ignored) for "display:table", for the same reason (tables generate anonymous boxes around their raw text content).

Here's a version of your fiddle with that tweak, to demonstrate this.
 http://jsfiddle.net/WX2Xe/

Comment 3

[Sterling Camden]

yikes... that's pretty rough, because I don't think the user would ever expect that behavior. tables are a bit different since you would naturally expect to have cells. i get it, but if it were me i would still try to find a work around.