마우스오버 또는 포커스 시 CSS 자르기 확장 시작하기

텍스트 표시는 웹 디자인에서 중요한 요소로, 사용자 경험과 웹 사이트의 가독성에 영향을 미칩니다. 텍스트가 체계적으로 올바르게 표시되면 사용자는 쉽게 이해하고 웹사이트에 관심을 가질 것입니다. 그러나 경우에 따라 웹 페이지의 지정된 공간에 비해 텍스트가 너무 길어질 수 있습니다. 이 텍스트를 올바르게 표시하기 위해 truncate 메소드를 사용합니다. Primer CSS는 텍스트를 자를 수 있을 뿐만 아니라 호버 또는 포커스 효과를 사용하여 텍스트를 확장할 수 있는 방법을 제공합니다. 이 기사에서는 이것이 어떻게 작동하는지, 그리고 이를 가능하게 하는 클래스에 대해 논의할 것입니다.

CSS 시작하기

Primer CSS는 개발자가 웹 애플리케이션 및 웹 사이트를 위한 일관되고 전문적인 프런트 엔드를 만들 수 있는 강력한 오픈 소스 CSS 프레임워크입니다. GitHub 디자인 시스템에 의해 설계되었습니다. 사용하기 쉽고 많은 시간을 절약할 수 있는 타이포그래피, 버튼, 경고, 잘림, 메뉴, 탐색 등과 같은 다양한 내장 구성 요소 세트를 제공합니다. 또한 초보자가 언제든지 시작할 수 있도록 자세한 설명서를 제공합니다. 웹 페이지에서 넘치는 텍스트를 자르기 위한 사전 정의된 클래스가 있습니다.

Primer CSS에서 클래스를 사용하기 전에 npm에서 설치해야 합니다 -

으아악

또는 HTML 코드에서 CDN 링크를 사용하세요 -

으아악

마우스를 가리키거나 포커스 상태일 때 자르고 확장하기

마우스를 올리거나 초점을 맞춘 상태에서 잘린 텍스트를 확장하기 위해 Primer CSS에는 내장 클래스가 있습니다. 수업 내용은 다음과 같습니다 -

• Truncate-text - 텍스트를 자르는 데 사용됩니다

• Truncate-text--expandable - 마우스를 올리거나 초점을 맞출 때 잘린 텍스트를 확장하는 데 사용됩니다.

예

이 예에서는 사전 정의된 상자 클래스를 사용하여 div 요소를 크기 조정 가능한 상자로 변환합니다. 여기서 p-1은 상자의 모든 측면에 4px(0.25rem)의 패딩을 추가하는 클래스 약칭입니다.

다음으로 상자에 원하는 스타일을 추가하기 위한 스타일 속성이 있습니다. resize 속성 값을 horizontal으로 설정하여 사용자가 상자를 오른쪽 모서리에서 드래그하기만 하면 가로로 크기를 조정할 수 있습니다. 요소에 가로 스크롤 막대를 추가하려면 “overflow:scroll” 속성을 사용합니다. 가로 스크롤 막대를 사용하면 사용자가 텍스트를 가로로 스크롤할 때 숨겨진 콘텐츠를 볼 수 있습니다.

다음으로 상자 내부에 맞게 잘리는 앵커 태그가 포함된 요소를 만듭니다. Truncate-text는 앵커 태그 안의 텍스트를 자르기 위해 정의된 클래스이고, Truncate-text--expandable 클래스는 사용자가 잘린 텍스트 위에 마우스를 올리거나 초점을 맞출 때마다 확장할 수 있도록 내장되어 있습니다.

으아악

예

이 예에서는 div 요소 내부에 마우스를 올리거나 초점을 맞추면 확장되는 잘린 텍스트를 추가했습니다.

으아악

결론

이 글에서는 공간이 제한된 경우 시각적으로 매력적인 방식으로 텍스트를 적절하게 표시하는 방법을 배웠습니다. 우리는 Primer CSS를 사용하여 쉽게 수행할 수 있는 절단 방법을 사용합니다. 또한 확장 가능한 잘린 텍스트를 생성하면 사용자는 웹 사이트의 전체적인 모양과 느낌에 영향을 주지 않고 필요할 때 정보에 액세스할 수 있습니다. 이를 통해 귀하의 웹사이트는 사용자 친화적이고 전문적으로 만들어집니다.

위 내용은 마우스오버 또는 포커스 시 CSS 자르기 확장 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!