Avenirs DSAV

Appearance

Text ​

Last updated: 2026-06-24

✨ Introduction ​

This text utility generates text-related classes for all defined styles.

🏷️ Class patterns ​

Class patternDescription
.av-max-linesApplies maximum lines with ellipsis
.av-wrap-anywhereApplies wrapping anywhere with hyphens
.av-ellipsisApplies ellipsis for single-line text
.av-text-{left|center|right|justify}Applies text alignment
.av-text-{left|center|right|justify}--{sm|md|lg|xl}Applies text alignment from a breakpoint and up
.av-text-{bold|light|regular}Applies text weight

📝 Notes:

  • for .av-max-lines, the number of lines is determined by the CSS variable --max-lines (default: 2), which can be set on the element or inherited from a parent element.
  • text alignment classes are generated from the available alignment values and also expose responsive variants.

🎨 Some CSS results ​

Text max lines classes ​

css
.av-max-lines {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-clamp: var(--max-lines) !important;
  -webkit-line-clamp: var(--max-lines) !important;
}

Wrap anywhere with hyphens classes ​

css
.av-wrap-anywhere {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

Text ellipsis classes ​

css
.av-ellipsis {
  display: inline !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

Text alignment classes ​

css
.av-text-left {
  text-align: left !important;
}

.av-text-center {
  text-align: center !important;
}

.av-text-right {
  text-align: right !important;
}

.av-text-justify {
  text-align: justify !important;
}

Text weight classes ​

css
.av-text-bold {
  font-weight: var(--font-weight-bold) !important;
}

.av-text-light {
  font-weight: var(--font-weight-light) !important;
}

.av-text-regular {
  font-weight: var(--font-weight-regular) !important;
}

Responsive text alignment classes ​

css
@media (min-width: <breakpoint>) {
  .av-text-center--md {
    text-align: center !important;
  }
}

💡 Examples of use ​

html
<span class="av-max-lines">
  <!-- av-max-lines: maximum lines with ellipsis (2 lines due to default value of --max-lines) on all screens -->
</span>
html
<span class="av-max-lines" style="--max-lines: 3;">
  <!-- av-max-lines: maximum lines with ellipsis (3 lines due to overridden value of --max-lines) on all screens -->
</span>
vue
<template>
  <span
    class="av-max-lines"
    style="--max-lines: 4;"
  >
    <!-- av-max-lines: maximum lines with ellipsis (4 lines due to overridden value of --max-lines) on all screens -->
  </span>
</template>
vue
<template>
  <span class="my-truncated-text av-max-lines">
    <!-- av-max-lines: maximum lines with ellipsis (number of lines determined by the .my-truncated-text style) on all screens -->
  </span>
</template>

<style lang="scss" scoped>
.my-truncated-text {
  --max-lines: 3;
}
</style>
vue
<template>
  <div class="parent">
    <span class="av-max-lines">
    <!-- av-max-lines: maximum lines with ellipsis (number of lines determined by the parent style) on all screens -->
    </span>
  </div>
</template>

<style lang="scss" scoped>
.parent {
  --max-lines: 3;
}
</style>
html
<span class="av-wrap-anywhere">
  <!-- av-wrap-anywhere: wrap anywhere with hyphens on all screens -->
</span>
html
<span class="av-ellipsis">
  <!-- av-ellipsis: ellipsis for single-line text on all screens -->
</span>
html
<p class="av-text-center">
  <!-- av-text-center: centered text on all screens -->
</p>
html
<p class="av-text-left av-text-right--lg">
  <!-- av-text-left: left-aligned text by default -->
  <!-- av-text-right--lg: right-aligned text from the lg breakpoint and up -->
</p>