![]() It can be clipped, display an ellipsis (.), or display a custom string. text-overflow: ellipsis only works with display: block and display: inline-block containers. But that’s getting us off track, so let’s move on. Mobile Chrome - beta (MobChr) Mobile Opera 12.10 (MobOp) Android Browser (Droid) Dolphin HD 9.3.1 (Dolph) Nokia n900 Maemo Web Browser (Mae). The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. ![]() Also in the latest release is the implementation of text-overflow: ellipsis. It’s easy to see how max-lines would be nixed since it’s function (setting the number of lines before truncating) is already baked into line-clamp and any further abstraction might be unnecessary. 6 browser the most CSS3-compatible of all. That said, it’s defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation. The spec for it is currently an Editor’s Draft, so that means nothing here is set in stone because it’s a work in progress. ellipsis This keyword value will display an ellipsis ( '', U+2026 Horizontal Ellipsis) to represent clipped text. Heres a fiddle demonstrating it: resize your browsers width or change the text to see it shift from ellipsis to no-ellipsis. The line-clamp property truncates text at a specific number of lines. To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''. ellipsis text-overflow truncation Code Snippets CSS Truncate String with Ellipsis Chris Coyier on (Updated on ) All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.
0 Comments
Leave a Reply. |