CSS Utility Classes Text

<template>
    <p class="_text-align:justify!">
        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.
        Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex
        communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius
        Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
    </p>
</template>

<template>
    <p class="_text-align:left!">This text is left aligned.</p>

    <p class="_text-align:center!">This text is center aligned.</p>

    <p class="_text-align:right!">This text is right aligned.</p>
</template>

<template>
    <p class="_white-space:normal!" style="width: 100px">This text should wrap.</p>
</template>

<template>
    <p class="_white-space:nowrap! _background:light!" style="width: 100px">
        This text should overflow the parent.
    </p>
</template>

<template>
    <div class="_display:block! _text:truncate!" style="max-width: 180px">
        This block text is truncated.
    </div>

    <span class="_display:inline-block! _text:truncate!" style="max-width: 150px">
        This inline text is truncated.
    </span>
</template>

<template>
    <p class="_text:break-word!">
        Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass
    </p>
</template>

<template>
    <p class="_text-transform:lowercase!">This text is lowercase.</p>

    <p class="_text-transform:uppercase!">This text is uppercase.</p>

    <p class="_text-transform:capitalize!">This text is capitalized.</p>
</template>

<template>
    <p class="_font-weight:extralight!">Extralight text.</p>

    <p class="_font-weight:light!">Light text.</p>

    <p class="_font-weight:normal!">Normal text.</p>

    <p class="_font-weight:semibold!">Semibold text.</p>

    <p class="_font-weight:bold!">Bold text.</p>

    <p class="_font-weight:black!">Black text.</p>
</template>

<template>
    <p class="_font-weight:lighter!">Lighter weight text (relative to the parent element).</p>

    <p class="_font-weight:bolder!">Bolder weight text (relative to the parent element).</p>
</template>

<template>
    <p class="_font-style:italic!">Italic text.</p>
</template>

<template>
    <p class="_font-size:sm!">Extra-small text.</p>

    <p class="_font-size:sm!">Small text.</p>

    <p class="_font-size:md!">Medium text.</p>

    <p class="_font-size:lg!">Large text.</p>

    <p class="_font-size:xl!">Extra-large text.</p>
</template>

<template>
    <p class="_font-family:monospace!">This text is monospace.</p>
</template>

<template>
    <a class="_text-decoration:none!" href=".."> This link is not underlined. </a>
    <p class="_text-decoration:underline!">This link has an underline.</p>
    <p class="_text-decoration:line-through!">This link has a line-through.</p>
    <p class="_text-decoration:overline!">This link has an overline.</p>
</template>

<template>
    <p class="_text:weak!">This text is weak.</p>
    <p class="_text:weaker!">This text is weaker.</p>
    <p class="_text:weakest!">This text is weakest.</p>
    <p class="_text:muted!">This text is muted (same as weak).</p>
</template>

<template>
    <p class="_text:weak!">
        This text is weak and has a <a class="_text:reset!" href="..">text reset link</a>.
    </p>
</template>

<template>
    <ul class="_list:inline!">
        <li>Lorem ipsum</li>
        <li>Phasellus iaculis</li>
        <li>Nulla volutpat</li>
    </ul>

    <hr class="_margin-y:2!" />

    <ul class="_list:unstyled!">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>
            Nulla volutpat aliquam velit
            <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
            </ul>
        </li>
    </ul>
</template>