이 문서에서는 Tailwind에서 텍스트를 고정하는 절차를 제공합니다.
특정 줄 수에 맞게 텍스트를 고정하는 방법은 무엇입니까?
Tailwind의 줄 고정 클래스는 블록의 텍스트 내용을 특정 줄 수로 제한합니다. 이렇게 하면 텍스트 블록은 클래스에 지정된 줄 수 이후의 텍스트를 숨깁니다. 웹 페이지에서 일부 텍스트 정보가 있음을 사용자에게 표시하거나 웹 페이지의 포화를 피하기 위해 불필요한 텍스트를 모두 숨기기 위해 사용할 수 있습니다.
통사론
아래 주어진 구문은 ' 수업 라인 클램핑을 적용할 요소의 속성:
위에서 정의한 구문에서 사용자는 ' 1~6 ” 기본 라인 클램핑 클래스를 사용합니다. 예를 들어, “ 라인클램프-1 ” 클래스에서는 텍스트 내용이 한 줄을 초과하지 않도록 합니다.
몇 가지 예를 통해 '라인-캠프' 수업의 개념을 이해해 보겠습니다.
예제 1: Line 클램프 클래스를 사용하여 내용을 특정 줄 수로 제한
아래와 같이 Tailwind의 줄 고정 클래스를 사용하여 텍스트 내용을 3줄로 제한하겠습니다.
< div 수업 = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< 피 수업 = ' 라인클램프-3 w-72' > 이것은 샘플 단락입니다. 3줄까지만 보입니다. 이후의 모든 콘텐츠는 숨겨집니다. 이는 Tailwind의 라인 클램핑 클래스 때문입니다. < / 피 >
< / div >
위 코드에 대한 설명은 다음과 같습니다.
- ㅏ ' div ” 요소는 “를 사용하여 둥근 모서리로 생성됩니다. 반올림-lg ' 수업. “를 사용하여 여백과 패딩을 제공합니다. m-{숫자} ” & “ p-{숫자} ' 클래스.
- 다음으로, div 요소의 요소는 '를 사용하여 중앙에 배치됩니다. 정당화 센터 ' 클래스, 그리고 ' 몸을 풀다 ” 클래스는 div의 하위 요소를 포함할 컨테이너를 생성합니다.
- “ bg-{색상}-{번호} ” 클래스는 div 요소의 배경색을 설정합니다.
- ㅏ ' ” 태그는 텍스트 내용을 포함하여 생성됩니다. “를 사용하여 고정된 너비를 제공합니다. w-{번호} ' 수업.
- 마지막으로 ' 피 ” 요소는 “를 사용하여 세 줄로 제한됩니다. 라인클램프-3 ' 수업.
산출
출력에서 지정된 세 줄 제한을 초과한 텍스트 콘텐츠가 숨겨져 있음을 볼 수 있습니다.
예 2: Tailwind에서 기본 상태로 Line 클램프 클래스 사용
Tailwind는 디자인 레이아웃을 더욱 동적으로 만드는 데 사용할 수 있는 요소에 대한 다양한 기본 상태를 제공합니다. 개발자는 이러한 상태와 함께 Tailwind 클래스를 사용하여 해당 상태가 달성될 때마다 지정된 디자인 속성을 요소에 제공할 수 있습니다. 마찬가지로 'line-clamp' 클래스도 이러한 기본 Tailwind 상태와 함께 사용할 수 있습니다.
Tailwind의 상태와 함께 'line-clamp' 클래스를 사용하기 위한 구문은 다음과 같습니다.
{ 상태 } : 라인클램프- { 숫자 }다음과 같이 세 가지 기본 상태가 설명되어 있습니다.
- 호버: 사용자가 요소 위로 마우스 커서를 가져갈 때 요소의 상태입니다.
- 집중하다: 요소에 초점이 맞춰진 상태입니다. 예를 들어, 사용자는 'tab' 키를 눌러 요소로 이동합니다.
- 활동적인: 사용자가 요소를 활성화한 상태입니다.
아래 데모에서는 모든 것이 이전 예와 동일합니다. 유일한 차이점은 라인 클램핑 클래스가 ' 호버링 ' 상태:
< div 수업 = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< 피 수업 = ' hover:line-clamp-3 w-72' > 이것은 샘플 단락입니다. 3줄까지만 보입니다. 이후의 모든 콘텐츠는 숨겨집니다. 이는 Tailwind의 린 클램핑 클래스 때문입니다. < / 피 >
< / div >
“ ” 클래스는 “에서 제공됩니다. hover:line-clamp-3 ” 클래스는 사용자가 콘텐츠 상자 위에 마우스 커서를 놓을 때마다 텍스트 콘텐츠를 세 줄로 제한합니다.
산출
아래 출력에서 마우스 커서를 블록 위로 가져갈 때 선 고정 속성이 적용되는 것을 볼 수 있습니다.
예제 3: 중단점과 함께 라인 클램프 클래스 사용
중단점은 사용자가 반응형 디자인 레이아웃을 만드는 데 도움이 되는 Tailwind의 미디어 쿼리입니다. Tailwind는 최소 너비가 사전 정의된 5개의 기본 중단점을 제공합니다. 개발자는 이러한 중단점과 함께 라인 클램핑 클래스를 사용할 수도 있습니다.
중단점과 함께 줄 고정 클래스를 사용하는 구문은 다음과 같습니다.
{ 중단점 접두사 } : 라인클램프- { 숫자 }위 구문에서 언급된 '중단점 접두사'는 다음과 같습니다.
- sm: 이 중단점의 최소 너비는 640px입니다.
- MD: 이 중단점의 최소 너비는 768px입니다.
- LG: 이 중단점의 최소 너비는 1024px입니다.
- 특대: 이 중단점의 최소 너비는 1280px입니다.
- 2XL: 이 중단점의 최소 너비는 1536px입니다.
아래 제공된 데모에서 ' 피 ” 요소에는 다양한 중단점에서 다양한 라인 클램프 클래스가 제공됩니다. 그러면 새 중단점에 도달할 때마다 텍스트 블록의 줄 고정 속성이 변경됩니다.
< div 수업 = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< 피 수업 = ' 라인-클램프-1 lg:라인-클램프-3 md:라인-클램프-2 sm:라인-클램프-1 w-72' > 이것은 샘플 단락입니다. 3줄까지만 보입니다. 이후의 모든 콘텐츠는 숨겨집니다. 이는 Tailwind의 린 클램핑 클래스 때문입니다. < / 피 >
< / div >
p 요소에는 기본적으로 'line-clamp-1' 클래스가 제공됩니다. 그러나 'p' 요소의 텍스트 내용은 '의 경우 한 줄로 제한됩니다. sm ” 중단점, “에 대한 두 줄 MD ” 중단점, 그리고 “에 대한 세 줄 LG ” 중단점.
산출
출력에서 화면 크기가 변경됨에 따라 텍스트 블록의 line-clamp 속성이 변경된다는 것이 분명합니다.
Tailwind에서 텍스트를 특정 줄 수로 고정하는 절차를 시연했습니다.
결론
Tailwind의 줄 클램프 클래스는 요소의 텍스트 콘텐츠를 지정된 줄 수로 제한합니다. 'lin-clamp-{number}' 클래스는 텍스트를 제한된 줄에 고정하기 위한 구문으로 사용됩니다. 라인 클램프 클래스는 사전 정의된 중단점 및 Tailwind의 상태 변형과 함께 사용할 수 있습니다. 이 문서에서는 텍스트를 지정된 줄 수로 고정하는 절차를 제공했습니다.