![]() ![]() It will end with ellipsis when text-overflow: ellipsis is included. This property only has effect when the display property is set to ‘-webkit-box’ or ‘-webkit-inline-box’ and the ‘-webkit-box-orient’ property set to ‘vertical’. In most cases you will also want to set overflow to hidden, otherwise the. You all may have experienced this issue like we have were you want to add Ellipsis using Tailwind.Clear answer there is no such class that you can add currently to achieve that. CSS property that will contain text to a given amount of lines when used in combination with display: -webkit-box. webkit-line-clamp JS polyfill CSS property -webkit-line-clamp. The -webkit-line-clamp property is used to limit the amount of lines that a block container may contain. It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical. The is a very common and widely used scenario and it has a standard CSS implementation. The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. Truncating single line text followed by an ellipsis There a JavaScript solution might be ideal in some cases. Truncating multiple line text using pure CSS can be done, however, it has some caveats. Using Opera's -o-ellipsis-lastline value. ![]() ![]() display: -webkit-box -webkit-box-orient: vertical -webkit-line-clamp: 2. Linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%) Ĭons: There's a fade-out instead of an ellipsis and requires heights to be set manually. Text truncation using text-overflow: ellipsis and line-clamp CSS properties. The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. CSS-Tricks describes three solutions, each one having its pros and cons. So, for now you will have to use a polyfill for browsers that don't support this property. Unfortunately, non of the main browsers supports this feature yet. In WebKit, there isn't an alternative to ellipsis. Note that WebKit can sometimes cut off the last letters of the word. However, you can use -webkit-line-clamp instead. The difficulty with this property is that it has limited browser support. ![]() The CSS Overflow Level 3 specification defines a standard line-clamp property (without the quirks the ´-webkit-` prefixed solution has). This property is used to limit the block of text to a specified number of lines. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |