¡Trim, control and dominate the text in your grids with Quickly!

It limits text by words or characters with intelligent classes and improves the readability of your web design. Apply automatic cuts to textual content in your grids, either by number of words or characters.This helps you keep your designs clean, avoid overflows and ensure an ordered presentation on any device, without sacrificing style or clarity.

Text clipping classes: characters and words

Quickly CSS Grid It includes a set of utilitarian classes to automatically cut the textual content based on characters (c) or words (W).These classes are ideal for limiting the amount of text visible in blocks of content, cards, buttons or any component where space and readability are key.

Classes, example: .text-cut-[amount][c|w]

C: Cut by number of characters.

W: Cuture by number of words.

Each class eliminates the excess content and automatically adds suspensive points (...) to indicate that the text has been truncated.

Cut by characters (c)

These classes limit the visible text to the exact number of specific characters.Useful for maintaining uniformity in titles, labels or short descriptions.

.text-cut-[amount]c

Label	Description
.text-cut-60c	Maximum sample 60 characters, ideal for short labels.
.text-cut-80c	Up to 80 characters, useful for subtitles or names.
.text-cut-100c	Standard cutting for content cards.
.text-cut-150c	Ideal for short descriptive text fragments.
.text-cut-200c	For medium information blocks.
.text-cut-250c	It maintains legible medium texts without overloading.
.text-cut-300c	Useful in more extensive but controlled descriptions.
.text-cut-350c	It allows greater depth of content without overflows.
.text-cut-400c	Suitable for long informative blocks.
.text-cut-450c	Wide limit with style, before requiring pagination.

Clases aplicadas para recorte de caracteres

(60 characters) - This is an example of text that should be automatically cut by exceeding 60 visible characters.

(100 characters) - This paragraph has a larger character of characters, allowing a more extensive amount of text to be shown before applying the cut.

(150 characters) - Quickly allows you to precisely adjust the quantity of visible text in each block, which is especially useful when you are working with cards, content blocks or responsive layouts in which to maintain visual coherence is essential.

(250 characters) - Here you can observe how the longest text is carefully trimmed thanks to the utilitarian classes of Quickly CSS.This functionality is perfect to maintain clean and controlled design without writing additional logic in Javascript or conditioning the content from the backend.

HTML

                                                                        
    <p class="text-cut-60c">
        This is an example of text that should be automatically trimmed by exceeding 60 visible characters.
    </p>
                                  
    <p class="text-cut-100c">
        This paragraph has a larger character limit, allowing a more extensive amount of text to be shown before applying the cut.
    </p>
                                  
    <p class="text-cut-150c">
        Quickly allows you to adjust with precision the amount of visible text in each block, which is especially useful when you are working with cards, content blocks or responsive layouts in which to maintain visual coherence is essential.
    </p>
                                  
    <p class="text-cut-250c">
        Here you can see how the longest text is carefully trimmed thanks to the utilitarian classes of Quickly CSS.This functionality is perfect to maintain clean and controlled design without writing additional logic in Javascript or conditioning the content from the backend.
    </p>

Cut for words (w)

These classes control the number of visible words.They are ideal when the approach is to keep complete phrases, without cutting in the middle of a word.

.text-cut-[amount]w

Label	Description
.text-cut-5w	Show only the first 5 words.Perfect for short titles.
.text-cut-10w	Short phrases, compact headers.
.text-cut-15w	Brief fragments with a clear idea.
.text-cut-20w	Ultra concise summaries.
.text-cut-25w	Short content for cards or snippets.
.text-cut-30w	Ideal for previous paragraph views.
.text-cut-35w	Balance between clarity and brevity.
.text-cut-40w	For more elaborate descriptions.
.text-cut-45w	Extended descriptive text without losing readability.
.text-cut-50w	Ideal for more complete previews.
.text-cut-55w	More freedom for short narratives.
.text-cut-60w	Maintain long but controlled texts.
.text-cut-65w	For informative texts with flow.
.text-cut-70w	Extensive presentations without overloading the UI.
.text-cut-75w	Flexible cut with good content coverage.
.text-cut-80w	Almost a whole paragraph, perfect for blogs or chips.
.text-cut-85w	Wide phrases to moderate technical contexts.
.text-cut-90w	Wide blocks without saturating the design.
.text-cut-95w	Long content with good visual structure.
.text-cut-100w	Upper text limit with narrative approach.

Applied classes for word cuts

(10 words) - Quickly CSS allows you to control the number of words that are shown inside a block.

(20 words) - These classes are ideal for maintaining complete phrases and avoiding abrupt cuts, helping to improve visual experience in responsive interfaces.

(35 words) - Apply a limit by words allows you to show a fair amount of content without compromising readability or design, especially useful in information cards or dynamic components with limited space.

(50 words) - Quickly CSS gives you flexibility to adapt text blocks precisely, making your web design cleaner, organized and easy to read in any resolution or device.

HTML

                                                                        
    <p class="text-cut-10w">
        (10 words) - Quickly CSS allows you to control the number of words that are shown inside a block.
    </p>
                                      
    <p class="text-cut-20w">
        (20 words) - These classes are ideal for maintaining complete phrases and avoiding abrupt cuts, helping to improve visual experience in responsive interfaces.
    </p>
                                      
    <p class="text-cut-35w">
        (35 words) - Apply a limit by words allows you to show a fair amount of content without compromising readability or design, especially useful in information cards or dynamic components with limited space.
    </p>
                                      
    <p class="text-cut-50w">
        (50 words) - Quickly CSS gives you flexibility to adapt text blocks precisely, making your web design cleaner, organized and easy to read in any resolution or device.
    </p>