CSS를 사용하여 표시 줄임표를 초과하는 효과를 얻는 방법

CSS에서 줄임표 초과란 요소 내의 텍스트가 해당 컨테이너의 너비나 높이를 초과하는 경우 CSS 속성 설정을 통해 텍스트 내용을 타원 형태로 표시하는 방법을 말합니다.

일반적인 상황에서 텍스트가 넘치면 브라우저는 자동으로 텍스트를 다음 줄로 이동하여 표시합니다. 하지만 어떤 경우에는, 특히 모바일이나 반응형 디자인에서 텍스트 내용을 한 줄에 표시하고 텍스트가 컨테이너 너비를 초과하면 줄임표 형태로 표시하고 싶습니다.

CSS에서 생략된 초과 속성은 이 효과를 얻는 데 도움이 될 수 있습니다. 다음은 CSS에서 일반적으로 과도하게 생략되는 두 가지 속성인 text-overflow와 white-space입니다.

1. text-overflow

text-overflow는 CSS3의 새로운 속성으로, 텍스트가 컨테이너를 넘칠 때 처리하는 방법을 설정하는 데 사용됩니다. 이 속성의 값은 다음과 같습니다.

• clip: 텍스트가 컨테이너를 넘친 직후에 잘립니다.
• 줄임표: 텍스트가 컨테이너를 넘친 후 줄임표 형태로 표시됩니다.
• string: 텍스트가 컨테이너를 넘칠 때 지정된 문자열을 사용하여 기본 줄임표를 바꿉니다.

텍스트 오버플로를 사용할 때 일반적으로 내용이 한 줄에 표시되도록 제한하려면 Overflow:hidden 및 White-space:nowrap을 설정해야 합니다. 다음 코드는

div {
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

2. white-space

white-입니다. space 속성 요소 내의 공백 문자(예: 공백, 캐리지 리턴 등)를 처리하는 방법을 설정하는 데 사용됩니다. 이 속성의 값은 다음과 같습니다.

• normal: 기본값, 요소에 연속된 공백 문자가 여러 개 있는 경우 공백 하나만 표시됩니다.
• nowrap: 텍스트 줄 바꿈을 허용하지 않고 텍스트가 같은 줄에 표시되도록 강제합니다.
• pre: 공백 문자를 유지하면 텍스트가 소스 파일과 동일하게 표시됩니다.
• 사전 줄바꿈: 공백을 유지하고 텍스트 줄 바꿈을 허용합니다.
• pre-line: 여러 개의 연속된 공백 문자를 병합하여 텍스트 줄 바꿈을 허용합니다.

white-space 속성을 사용하여 오버플로 생략을 달성하는 경우 다음 코드와 같이 공백 값을 nowrap으로 설정하고 오버플로 값을 숨김으로 설정해야 합니다.

div {
    width: 200px; 
    height: 30px; 
    background-color: #f3f3f3; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}

주의해야 할 점 공백 속성을 사용하면 전체 요소 내의 텍스트가 표시되므로 text-overflow 속성과 함께 사용해야 합니다.

요약

CSS에서 text-overflow 및 공백 속성을 사용하면 일부 특수한 경우에 텍스트의 오버플로 생략을 쉽게 수행할 수 있습니다. 물론, 실제 프로젝트에 적용할 때에는 실제 상황에 맞춰 조정해 주시기 바랍니다.

위 내용은 CSS를 사용하여 표시 줄임표를 초과하는 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!