scss-library/components/02_ContentShape/truncation/_truncation.styl

/**
 * This mixin is for truncating text. By now, this can only be done by container height.
 * Because this is actually realy messed up in native CSS, you have to specify the line-height
 * and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case.
 */
 
RV-Truncation--fade__Content(background-color)
	+RV-Element()
		&:last-child:after
			background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
			display block
			content '###'
			color transparent
			opacity 1
			position absolute
			top calc(var(--height) - 40px)
			width 100%
			height calc(1.5 * var(--line-height))
			z-index 10

RV-Truncation--fade(background-color=white)
	+RV-Block--modifier()
		RV-Truncation--fade__Content(background-color)

RV-Truncation--ellipsis__Cutter(background-color)
	+RV-Element()
		&:after
			position absolute
			display block
			right 0
			content '...'
			background-color background-color
			padding-left 5px
			padding-bottom 10px
			box-shadow -10px 8px 6px 0px background-color;
			line-height --line-height
			top calc(var(--height) - 38px)
			
RV-Truncation--ellipsis__Content(background-color)
	+RV-Element()
		&:after
			display block
			background-color background-color
			content ''
			position relative
			right 0
			height --height
			width 100%
			bottom -100%
			z-index 30

RV-Truncation--ellipsis(background-color=white)
	+RV-Block--modifier()
		RV-Truncation--ellipsis__Cutter(background-color)
		RV-Truncation--ellipsis__Content(background-color)
				
RV-Truncation(line-height=1.3em, height=100%, background-color=white)
	+RV-Block()
		RV-CSSParameter({
			line-height: line-height,
			height: height,
			background-color: background-color
		})
		
		display grid
		align-content flex-start
		grid-template-rows repeat(auto-fill, --line-height)
		height --height
		
		height calc_height(--height)
		width calc_width()
		
		position relative
		
		*
			overflow hidden
			grid-row 1/-1
			background --background-color
		line-height --line-height
		
		RV-Truncation--fade(--background-color)
		RV-Truncation--ellipsis(--background-color)
		
RV-Truncation()