milicharge.blogg.se - Javascript multiline text overflow ellipsis

JAVASCRIPT MULTILINE TEXT OVERFLOW ELLIPSIS HOW TO
JAVASCRIPT MULTILINE TEXT OVERFLOW ELLIPSIS FULL
JAVASCRIPT MULTILINE TEXT OVERFLOW ELLIPSIS CODE

JAVASCRIPT MULTILINE TEXT OVERFLOW ELLIPSIS CODE

Follow the code below.text-ellipsis Ellipsis to multiline text. Ellipsis to one line textĪpplying ellipsis for one like is easy.

JAVASCRIPT MULTILINE TEXT OVERFLOW ELLIPSIS FULL

UI Developers usually truncate the extra text in the line by applying text-ellipsis, which means showing the 3 dots (visually explains there is even more text, that can be handled by applying title attribute to the element and show the full text on hover). Showing 1 or 2 lines of the title looks good on designs like card or excerpt, also important to handle the extra text overflowing in the same line. * set position to right bottom corner of block */

* fix problem when last visible word doesn't adjoin right side */

* max-height = line-height (1.2) * lines max number (3) */ * use this value to count block height */ Here's a fiddle demonstrating it: resize your browser's width or change the text to see it shift from ellipsis to no-ellipsis.Īside from the arbitrary elegance factor, I believe this is more performant than the popular solution because it doesn't rely on floats (which require a lot of repainting) - absolute positioning is much simpler to compute since there are no inter-dependencies when calculating layout.įor Firefox & Internet explorer * styles for '.' */ Of the text, and occupies any remaining space. It's obscured by the fill, which is positioned at the bottom right * The ellipsis is always at the bottom right of the container,īut when the text doesn't reach the bottom right. Obviously any number of these classes can be written as needed * You'll need to know the line height to clamp on line breaks */ * We need a solid background or background-position: fixed */ Lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit The following CSS requirements must be met: must have a width, max-width or flex-basis must have white-space: nowrap must have overflow with value other than visible must be display: block or inline-block (or the functional equivalent, such as a flex item). Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. With text-overflow, ellipsis can be applied to a single line of text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy You can do a fancy gradient effect to make the text fade into the ellipsis, but I'll leave that cosmetic detail to discretion. A 'fill' element, also inside the inline wrapper, that occludes the ellipsis when the text content doesn't exceed the dimensions of the containerĪs with previous CSS-only solutions, the technique demands a solid colour background or fixed position background image for the contents: the ellipsis needs to obscure parts of the text, and the fill needs to obscure the ellipsis.An ellipsis contained within the inline wrapper but what about if you want to truncate multiple lines of text If you want to see that magic then please continue reading ).It need to be dynamic and change with resizing, div width is not constant and known.

In this example, first row with dots must be red because it hide text with red color, and show black dots on second row, because there is no red text hidden by dots.

JAVASCRIPT MULTILINE TEXT OVERFLOW ELLIPSIS HOW TO

A block level container which determines the maximum height of the contents How to style dots (ellipsis) depend on what text it hide.

Results are best in webkit browsers due to the availability of webkit-line-clamp. Ellipsis will work in conjuction with CSS column-count if you wish. I recently had to create a solution which would work in IE7, so pseudo elements weren't an option in the first place. FTEllipsis Solves the problem of applying ellipsis () on a multi-line block of text at the point it overflows its container. I'm posting this because I believe my solution is less complex than the popular one, which involves pseudo elements and float behaviour.