{"size": 1972, "ext": "js", "max_stars_repo_path": "packages/styles/stories/text-ellipsis.stories.js", "max_stars_repo_name": "antoinerollindev/symphony-ui-toolkit", "max_stars_repo_stars_event_min_datetime": "2021-06-17T11:20:29.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-17T11:20:29.000Z", "max_issues_repo_path": "packages/styles/stories/text-ellipsis.stories.js", "max_issues_repo_name": "antoinerollindev/symphony-ui-toolkit", "max_issues_repo_issues_event_min_datetime": "2022-01-14T13:10:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-10T13:37:35.000Z", "max_forks_repo_path": "packages/styles/stories/text-ellipsis.stories.js", "max_forks_repo_name": "antoinerollindev/symphony-ui-toolkit", "max_forks_repo_forks_event_min_datetime": "2021-03-19T09:03:03.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-12T10:50:59.000Z"}
{"max_stars_count": 1, "max_issues_count": 38, "max_forks_count": 19, "avg_line_length": 37.9230769231, "max_line_length": 147, "alphanum_fraction": 0.5897565923}
export default {
    title: 'Components/Text Ellipsis',
};

export const TextEllipsis = () => {
    return (`
    <div style="min-height: 600px">
    
        <h1>Text Ellipsis</h1>
        
        <li>1 row</li>
        <div class="text-ellipsis-container">
            <p class="tk-text-ellipsis" style="-webkit-line-clamp: 1">
                Really, really, really, really, really, really, long text that gets cut!
            </p>
        </div>

        <li>2 rows</li>
        <div class="text-ellipsis-container">
            <p class="tk-text-ellipsis tk-text-ellipsis__multiple-rows" style="-webkit-line-clamp: 2">
                Really, really, really, really, really, really, really, really, really, really, long text that gets cut!
            </p>
        </div>

        <li>Long continuous string - First word</li>
        <div class="text-ellipsis-container">
            <p class="tk-text-ellipsis" style="-webkit-line-clamp: 1">
                Reallyreallyreallyreallylongcontinuousstringforexamplealink
            </p>
        </div>

        <li>Long continuous string - Last word</li>
        <div class="text-ellipsis-container">
            <p class="tk-text-ellipsis" style="-webkit-line-clamp: 1">
                A few words before the reallyreallyreallyreallylongcontinuousstringforexamplealink
            </p>
        </div>

        <li>Long continuous string - 2 rows - Last word</li>
        <p style="font-weight: bold">
            A known limitation of text-ellipsis is if the last word of a multi-line ellipsis is a continuous string it will ellipse before the end.
        </p>
        <div class="text-ellipsis-container">
            <p class="tk-text-ellipsis tk-text-ellipsis__multiple-rows" style="-webkit-line-clamp: 2">
                This is a really, really, really, really, really, really, really, really, reallyreallyreallylongcontinuousstringforexamplealink
            </p>
        </div>
    
    </div>
    `);
};
