friendly-truncation/dist/friendly-truncation.css

A React component for elegantly truncating text content with a fade effect

.friendly-truncation{position:relative;height:var(--max-height, 100px);width:100%}.truncated-content{width:100%;height:100%;overflow:hidden;position:relative;mask-image:linear-gradient(to bottom,black 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%)}.blur-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#fff0 40%,#fff6 70%,#ffffffe6 90%,#fff);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end;padding-right:10px;padding-bottom:5px;opacity:.7}.ellipsis{font-weight:700;color:#666;padding:0 8px;background-color:#ffffffe6;border-radius:12px;position:absolute;bottom:8px;right:8px;box-shadow:0 1px 3px #0000001a;z-index:3;font-size:.9em}.toggle-button{margin-top:5px;background:none;border:none;color:#06c;cursor:pointer;font-size:.9em;padding:2px 5px;text-decoration:underline;z-index:2;position:relative}.toggle-button:hover{color:#049}.toggle-button:focus{outline:2px solid #0066cc;outline-offset:2px}.content-tooltip{position:absolute;max-width:var(--tooltip-max-width, 400px);min-width:200px;background-color:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;padding:12px;z-index:1000;opacity:0;visibility:hidden;animation:fadeIn .2s ease forwards;overflow:auto;max-height:80vh}.friendly-truncation:hover .content-tooltip{opacity:1;visibility:visible}.tooltip-content{font-size:1em;line-height:1.5}.expanded-content{position:absolute;top:0;left:0;right:0;background-color:#fff;padding:1px;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:2}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@property --truncate-bg-color{syntax: "<color>"; inherits: true; initial-value: white;}@property --truncate-line-height{syntax: "<length>"; inherits: true; initial-value: 1.5em;}@property --truncate-lines{syntax: "<integer>"; inherits: true; initial-value: 3;}.friendly-truncation-v2{box-sizing:border-box;position:relative;line-height:var(--truncate-line-height, 1.5em);height:calc(var(--truncate-line-height, 1.5em) * var(--truncate-lines, 3))}.friendly-truncation-v2-content{position:absolute;top:0;left:0;right:0;overflow:hidden;pointer-events:none;opacity:0}.friendly-truncation-v2:after{content:attr(data-title);display:block;height:calc(var(--truncate-line-height, 1.5em) * (var(--truncate-lines, 3) - 1));width:100%;position:absolute;top:0;left:0;overflow:hidden;pointer-events:none}.friendly-truncation-v2:before{content:attr(data-title);display:block;height:calc(var(--truncate-line-height, 1.5em) * (var(--truncate-lines, 3)));width:100%;position:absolute;top:0;left:0;mask-image:linear-gradient(to right,black 60%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 60%,transparent 100%);pointer-events:none}.v2-tooltip{position:absolute;max-width:var(--tooltip-max-width, 400px);min-width:200px;background-color:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;padding:12px;z-index:1000;opacity:1;visibility:visible;animation:v2FadeIn .2s ease forwards;overflow:auto;max-height:80vh;pointer-events:auto}.v2-tooltip-content{font-size:1em;line-height:1.5;color:#333}@keyframes v2FadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}