Word break

Class reference

# Normal

Use .break-normal to only add line breaks at normal word break points.

<p class="break-normal ...">...</p>

# Break Words

Use .break-words to add line breaks mid-word if needed.

<p class="break-words ...">...</p>

# Break All

Use .break-all to add line breaks whenever necessary, without trying to preserve whole words.

<p class="break-all ...">...</p>

# Responsive

To control the word breaks in an element only at a specific breakpoint, add a {screen}: prefix to any existing word break utility. For example, adding the class md:break-all to an element would apply the break-all utility at medium screen sizes and above.

<p class="break-normal **md:break-all** ...">
  <!-- ... -->
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.