This will cause the text to appear on a single line, and overflow outside of the paragraphs box. But that’s getting us off track, so let’s move on. We can prevent the paragraph from wrapping into multiple lines by assigning the white-space property a value of nowrap. 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. 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. Its a common problem, but I was a disappointed because we still dont have a simple, cross-browser. The space for the ellipsis is always reserved. A few days ago I had to truncate a multiline block of text. still its not working after applying above. This has to be used in conjunction with display: -webkit-box for it to work. MULTIPLE LINES OF TEXT OVERFLOW ELLIPSIS PLUSAnd luckily, CSS Tricks has a nice working demo, plus browser support is fairly decent now. This means that if your text isn't right-aligned or justified, there may be a noticable gap between the last visible word and the ellipsis (depending on the length of the first hidden word). When the text starts overflowing out of 2 lines, it gets truncated. Multiple lines Show more button that expands text when clicked text-overflow: ellipsisdoes not support multiple lines, but I remembered the line-clamp propertythat can be used to achieve multiline truncated text. The line-clamp property truncates text at a specific number of lines. The ellipsis is right-aligned on the last line. If you want to apply ellipsis (.) to a single line of text, CSS makes that somewhat easy with the text-overflow property.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |