Overflow wrap

Utilities for controlling line breaks within words in an overflowing element.

It controls how long words or URLs break when they exceed the width of their container.

Class list

Class name	Styles
co-overflow-wrap-normal	overflow-wrap: normal
co-overflow-wrap-anywhere	overflow-wrap: anywhere
co-overflow-wrap-break-word	overflow-wrap: break-word

Examples

overflow-wrap: normal

<div class="co-overflow-wrap-normal ...">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerInteger suscipit
    eros vel dolor tempor tincidunt eget ut nulla.
</div>

overflow-wrap: anywhere

<div class="co-overflow-wrap-anywhere ..." >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerInteger suscipit
    eros vel dolor tempor tincidunt eget ut nulla.
</div>

overflow-wrap: break-word

<div class="co-overflow-wrap-break-word ..." >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerInteger suscipit
    eros vel dolor tempor tincidunt eget ut nulla.
</div>

md:co-overflow-wrap-normal

It will work on medium and above screen.

<div class="md:co-overflow-wrap-normal ...">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerIntegerInteger suscipit
    eros vel dolor tempor tincidunt eget ut nulla.
</div>

Responsive design

Class name
xs:co-overflow-wrap-normal
sm:co-overflow-wrap-normal
md:co-overflow-wrap-normal
lg:co-overflow-wrap-normal
xl:co-overflow-wrap-normal