ameeeee
10/8/2019 - 12:44 PM

c-ellipsis 三点リーダー

@charset "UTF-8";

%c-ellipsis {
	&--line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	&--width {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
}
.c-ellipsis {
	&--line {
		&01 {
			@extend %c-ellipsis--line;
			-webkit-line-clamp: 1;
		}
		&02 {
			@extend %c-ellipsis--line;
			-webkit-line-clamp: 2;
		}
		&03 {
			@extend %c-ellipsis--line;
			-webkit-line-clamp: 3;
		}
	}
	&--width {
		@extend %c-ellipsis--width;
		// width: 100%; // projectで定義
	}
}