Skip to content

Hyphens

Utilities for applying hyphens to an element.

Quick reference

ClassPropertyToken
hyphens-nonehyphens: none;none
hyphens-manualhyphens: manual;manual
hyphens-autohyphens: auto;auto

Usage

Use the hyphens-{key} class for setup ratio aspect.

html

<div class="hyphens-none">
    <!-- ... -->
</div>

Applying conditionally

Breakpoints and media queries

You can also control the responsive breakpoint with variant class modifiers. For example lg:hyphens-auto will be only apply on large screens size and above.

html

<div class="hyphens-none lg:hyphens-auto">
    <!-- ... -->
</div>

Customization

Extend your theme

By default, the configuration provides a handful of general purpose hyphens utilities. You can easily extend the default scales using the Sass configuration.

scss
@use "lasco" with (
    $extend: (
        "hyphens": (
            "auto"
        )
    )
);

Released under the MIT License.