글자 라인 수 제한, 근데 이제 라인 수 미정을 곁들인

즉, 제 말은
글자 수가 한 줄 일 때는 평범하게 가운데 정렬로 나오고
글자 수가 2줄 이상일 때는 최대 2줄로 제한을 하고 초과된 내용을 숨기고 싶다는 의미입니다.
 
글자 가운데 정렬을 위해서는 flex 속성을 사용하고,
라인 수 제한을 위해서는 -webkit-line-clamp 속성을 사용합니다.
 
 

-webkit-line-clamp - CSS: Cascading Style Sheets | MDN

 
그런데 이제… 이 친구들은 display에서 겹치게 됩니다.
즉, 한 번에 한가지 밖에 사용을 못 하는 거죠.
 
그렇다면 어떻게 해야 하냐…
 
상위 속성에는 flex를 통해 가운데 정렬을 할당합니다.
그리고 하위의 text에 line-clamp를 주면 됩니다.
 
저는 tailwind로 작성해서 다음과 같습니다.

<li class="flex items-center">
	<span class="line-clamp-2"> {{ text }} </span>
</li>

 
 

결과가 만족스럽군요.