![]() ![]() You tell it how many lines you want to limit the text to and it will do so and add an ellipsis after the last word or portion of a word that is shown. Ellipsis That Text!: Its basic function is really helpful.There are other language considerations for the ellipsis as well. In Japanese and Chinese, the ellipsis is supposed to be vertically centered on the line of text - midway between the baseline and top of the line. So is great, but … indicates a pause or interruption. For example, in Polish, an unbracketed ellipsis indicates an interruption or pause in speech. Language Considerations: Because line clamp doesn’t offer an alternative to the ellipsis, you may get different (potentially unintended) meanings in different languages.No Alternate to the Ellipsis: If you wanted to use something besides the ellipsis at the end of the truncated line, you cannot.I tried this out with common Chinese, for example, and it gets ignored altogether. No Spaces? No Support: If the language doesn’t use spaces, -webkit-line-clamp doesn’t know what to do so it doesn’t apply.Overflow: hidden display: -webkit-box -webkit-line-clamp: 2 -webkit-box-orient: vertical Muchos Dependencies: It requires a lot of supporting properties.You can see this in action in my Line Clamp RTL Codepen. The -webkit-line-clamp gets ignored altogether. No RTL Support: It does not support any text with a direction: rtl property.The reason I bring this up is because cutting words up can cause significant changes to their meanings, particularly in headlines and such. Other times it will refuse to truncate a word at all. I have tried this with short, two-letter words and it will even cut off the last letter, leaving just one. I can’t see the logic to how it breaks, though - sometimes it’s on spaces, sometimes it cuts off the last one, two or three letters of a word. It does not break on spaces only - it will often break mid-word. Weird Break Points: “I Soldered the Cathode to the Main Board” can easily become “I Soldered the Cat…” Thanks, Ellipsis.It is, however supported by all other browsers as of the time of this writing. Limited Support: -webkit-line-clamp is not supported by Internet Explorer (IE), Microsoft Edge, Firefox or Opera Mini.Here are some things to consider, starting with the bad news first. webkit-line-clamp aims to resolve this, but there are several caveats. If you need to truncate text after more than one line, however, things get hairy. If you need to truncate text after one line, then the text-overflow: ellipsis is a great option - or any of the other text-overflow values. Accusantium, blanditiis dolorum?CSS Line-Clamp - The Good, the Bad and the Straight-up Broken Accusantium, blanditiis dolorum? Animi aut distinctio doloremque eveniet iusto laborum minus nisi optio, quia quisquam! Neque.Īdipisci earum odio qui voluptate voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Īdipisci earum odio qui voluptate voluptatem.Īnimi aut distinctio doloremque eveniet iusto laborum minus nisi optio, quia quisquam!Īdipisci earum odio qui voluptate voluptatem. JS polyfill CSS property -webkit-line-clamp WebkitLineClamp | JS polyfill CSS property -webkit-line-clamp Webkit Line Clamp
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |