입문서 CSS가 사용자 정의 최대 너비를 자릅니다.

웹 개발 프로젝트에서 개발자는 고객 요구, 전체적인 모양, 제한된 리소스 등과 같은 다양한 이유로 텍스트를 지정된 공간에 표시해야 하는 상황에 직면하게 됩니다. truncate 속성은 효과적인 CSS 속성입니다. 함수를 사용하면 이 문제를 해결할 수 있습니다.

개발자는 한 줄 텍스트를 표시하고 넘친 텍스트를 줄임표로 잘라낼 수 있습니다. 그러나 상황에 따라 잘린 텍스트의 최대 너비를 사용자 정의해야 할 수도 있습니다. 이 기사에서는 GitHub Design Systems가 디자인한 인기 오픈 소스 CSS 프레임워크인 Primer CSS를 사용하여 최대 너비를 사용자 정의하는 방법에 대해 설명합니다.

잘림은 무엇을 의미하나요?

웹 디자인에서 truncate는 CSS의 text-overflow 속성 값 중 하나입니다. 텍스트로 작업할 때 컨테이너가 텍스트를 담을 만큼 크지 않은 상황에 자주 직면합니다. 이러한 종류의 텍스트를 오버플로 텍스트라고 합니다. 이를 통해 텍스트 한 줄을 표시한 다음 줄임표를 사용하여 나머지 부분을 잘라낼 수 있습니다.

CSS에서 "truncate"를 사용하려면 다음 단계를 수행해야 합니다. -

• "공백" 속성을 nowrap

으로 설정합니다.

• overflow 속성을 hide

로 설정하세요.

• text-overflow 속성을 ellipsis

로 설정하세요.

예

으아악

너무 많은 코드 줄을 피하기 위해 대신 Primer CSS를 사용할 수 있습니다. Primer CSS에는 잘림 구성요소가 내장되어 있습니다. 동일한 사전 정의된 클래스가 있습니다.

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

으아악

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

으아악

잘린 텍스트의 최대 너비를 맞춤설정하세요

잘린 텍스트의 최대 너비를 사용자 정의하기 위해 Primer CSS는 웹 사이트에서 넘치는 텍스트를 자르기 위한 사전 정의된 클래스를 제공합니다.

예

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

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

그런 다음 Primer CSS에서 사전 정의된 클래스를 사용하여 최대 너비가 다른 다양한 잘린 텍스트를 표시합니다.

으아악

결론

콘텐츠가 넘칠 경우 표시되는 텍스트의 최대 너비를 사용자 정의하는 것은 좋은 습관이며 개발자가 웹 사이트의 제한된 공간 내에서 텍스트 표시를 제어하는 ​​데 도움이 될 수 있습니다. 이 글에서 설명한 방법을 따르면 시각적으로 매력적인 웹사이트를 만들 수 있습니다. 카드 디자인에서도 잘림 방법을 사용할 수 있습니다. 이렇게 하면 긴 제목, 표제, 카드 설명 등을 표시해야 하는 동안 콘텐츠를 더 읽기 쉽고 사용자 친화적으로 만들 수 있습니다.

위 내용은 입문서 CSS가 사용자 정의 최대 너비를 자릅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!