Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Isn't "text-overflow: ellipsis" valid CSS?

This code triggers an error when run through the W3C CSS Validator:

p{
    text-overflow: ellipsis;
}

I get:

Line     Code context      Error/Warning
2        p                 Parse Error [empty string]

Is it just a bug in the validator or am I missing something really obvious?

like image 926
Álvaro González Avatar asked Aug 01 '12 10:08

Álvaro González


People also ask

Why does text-overflow ellipsis not work?

text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)

Can I use text-overflow ellipsis?

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

What is text-overflow ellipsis in CSS?

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (' … '), or display a custom string.

How do you know if text is overflowing CSS?

Check its style. overflow property, if it is 'visible' then the element is hidden. Also, check if its clientWidth is less then scrollWidth or clientHeight is less then scrollHeight then the element is overflowed.


2 Answers

This is a bug in the CSS validator, it has been already reported. text-overflow:ellipsis is a valid rule, however the W3C CSS validator is unfortunately prone to errors (see bug list).

However, note that the current working draft lists some text-overflow values as feature at risk:

The Working Group has identified the following features as at risk of being removed from CSS Basic User Interface Module Level 3 when exiting CR. Implementors are urged to implement these features, if they wish to see these features remain in this specification. All other features are either defined in a normative reference (e.g. CSS 2.1 [CSS21] or Selectors [SELECT]) or are believed to have two or more implementations, and thus will not be dropped without returning to last call.

  • [...]
  • text-overflow property value: <string>
  • text-overflow property 2-value syntax and definition.

While this doesn't affect the ellipsis value, it could be the source of the bug in the validator:

Parse Error [empty string]

References

  • W3C: CSS Basic User Interface Module Level 3 (CSS3 UI): (WD-20120117)
    • Features at risk
    • 8.2. Overflow Ellipsis: the ‘text-overflow’ property
like image 91
Zeta Avatar answered Sep 28 '22 05:09

Zeta


It's valid based on MDN's reference, which also links to the spec: http://dev.w3.org/csswg/css3-ui/#text-overflow

Out of curiosity, I ran one of my own sites through the validator. I noted that it listed a few things that I would not consider errors, such as properly prefixed vendor extensions and data URIs.

like image 38
Tim M. Avatar answered Sep 28 '22 05:09

Tim M.