Skip to main content

Word breaks and whitespace

The typography break styles set how words break and if they can wrap.

Each break base class has a class to go with each of the media query viewport sizes. For example:

break-word-3xs
break-word-2xs
break-word-xs
break-word-sm
break-word-md
break-word-lg
break-word-xl
break-word-1xl
break-word-3xl
break-word-4xl
break-word-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/typography/break.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/typography/3xs/break.css';
@import 'cacao-css/dist/typography/2xs/break.css';
@import 'cacao-css/dist/typography/xs/break.css';
@import 'cacao-css/dist/typography/sm/break.css';
@import 'cacao-css/dist/typography/md/break.css';
@import 'cacao-css/dist/typography/lg/break.css';
@import 'cacao-css/dist/typography/xl/break.css';
@import 'cacao-css/dist/typography/2xl/break.css';
@import 'cacao-css/dist/typography/3xl/break.css';
@import 'cacao-css/dist/typography/4xl/break.css';
@import 'cacao-css/dist/typography/5xl/break.css';

See Import Cacao CSS for more information.

Source CSS​

Default styles​

typography/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */

/**
 * Break strings when their length exceeds the width of their container.
 */
.break-word {
    overflow-wrap: break-word !important;
}

/**
 * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
 * that could be all "one word".
 */
.break-all {
    word-break: break-all;
}

/**
 * Prevent whitespace wrapping
 */
.no-wrap {
    white-space: nowrap !important;
}

3xs styles​

typography/3xs/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-3xs) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-3xs {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-3xs {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-3xs {
        white-space: nowrap !important;
    }
}

2xs styles​

typography/2xs/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-2xs) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-2xs {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-2xs {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-2xs {
        white-space: nowrap !important;
    }
}

xs styles​

typography/xs/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-xs) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-xs {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-xs {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-xs {
        white-space: nowrap !important;
    }
}

sm styles​

typography/sm/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-sm) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-sm {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-sm {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-sm {
        white-space: nowrap !important;
    }
}

md styles​

typography/md/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-md) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-md {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-md {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-md {
        white-space: nowrap !important;
    }
}

lg styles​

typography/lg/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-lg) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-lg {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-lg {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-lg {
        white-space: nowrap !important;
    }
}

xl styles​

typography/xl/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-xl) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-xl {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-xl {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-xl {
        white-space: nowrap !important;
    }
}

2xl styles​

typography/2xl/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-2xl) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-2xl {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-2xl {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-2xl {
        white-space: nowrap !important;
    }
}

3xl styles​

typography/3xl/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-3xl) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-3xl {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-3xl {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-3xl {
        white-space: nowrap !important;
    }
}

4xl styles​

typography/4xl/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-4xl) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-4xl {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-4xl {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-4xl {
        white-space: nowrap !important;
    }
}

5xl styles​

typography/5xl/break.css
/* ===========================================================================
    Word wrapping and word break styles
=========================================================================== */
@media (--m-5xl) {
    /**
     * Break strings when their length exceeds the width of their container.
     */
    .break-word-5xl {
        overflow-wrap: break-word !important;
    }

    /**
     * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
     * that could be all "one word".
     */
    .break-all-5xl {
        word-break: break-all;
    }

    /**
     * Prevent whitespace wrapping
     */
    .no-wrap-5xl {
        white-space: nowrap !important;
    }
}