Created
September 20, 2023 04:08
-
-
Save isuke/001d341a6fcdade18b14215dfd685232 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* テキストを右端で折り返す | |
*/ | |
@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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment