Utility classes for text styling

text-utilities.css

/* --- Text transform --- */

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-normal-case {
  text-transform: none;
}

/* --- Text decoration --- */

.text-underline {
  text-decoration-line: underline;
}

.text-overline {
  text-decoration-line: overline;
}

.text-line-through {
  text-decoration-line: line-through;
}

.text-no-decoration {
  text-decoration-line: none;
}

/* --- Text alignment --- */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

/* --- Text wrap --- */

.text-wrap {
  text-wrap: wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* --- Text break --- */

.text-break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.text-break-words {
  overflow-wrap: break-word;
}

.text-break-all {
  word-break: break-all;
}

.text-break-keep {
  word-break: keep-all;
}

/* --- Text overflow --- */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.text-clip {
  text-overflow: clip;
}

/* --- Font weight --- */

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* --- Font style --- */

.font-italic {
  font-style: italic;
}

.font-not-italic {
  font-style: normal;
}