_typography.scss

/**
 * テキストを右端で折り返す
 */
@mixin text-break() {
  text-wrap: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/**
 * テキストの折返しを禁止する
 */
@mixin text-no-break() {
  text-wrap: nowrap;
  word-wrap: normal;
  white-space: nowrap;
}

/**
 * テキストを指定行数まで折り返す
 * 指定行数を超えた場合は末尾を「...」で省略する
 * @param {number} $line-clamp - 折り返す行数
 */
@mixin text-multiline-truncate($line-clamp) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-clamp;
}

/**
 * font-sizeとline-heightを設定する
 * @param {size} $font-size - フォントサイズ
 * @param {size} $gap - 文字の上下にどれだけスペースを入れるか
 */
@mixin font-size-and-line-height($font-size, $gap) {
  font-size: $font-size;
  line-height: calc(#{$font-size} + #{$gap} * 2);
}