CSS 글꼴이 누락을 초과했습니다.

웹 개발에서 텍스트 콘텐츠가 컨테이너의 범위를 초과하는 경우가 많아 페이지의 아름다움에 영향을 미칠 뿐만 아니라 사용자의 독서 경험도 저하됩니다. 이러한 상황에 대응하여 CSS는 생략을 넘어 글꼴의 효과를 얻을 수 있는 솔루션을 제공합니다.

1. 타원을 넘어선 CSS의 기본 원리

줄임표를 넘어선 글꼴은 요소 내 텍스트 내용이 요소에서 할당한 공간을 초과하는 경우 이해를 돕기 위해 초과 부분을 줄임표(...)로 표시하는 것을 의미합니다. 텍스트 콘텐츠에서 CSS 텍스트 오버플로는 다음 세 가지 속성을 통해 이루어집니다.

• text-overflow: 요소 너비를 초과한 후 텍스트가 표시되는 방식을 제어하는 ​​데 사용됩니다.
• white-space: 텍스트에서 줄 바꿈을 제어하는 ​​데 사용됩니다.
• overflow: 요소의 오버플로 내용이 표시되는 방식을 제어하는 ​​데 사용됩니다.

그 중 text-overflow 속성에는 다음 값이 포함됩니다.

• clip: 기본 속성 값, 초과 내용은 숨겨집니다.
• ellipsis: 초과 내용은 줄임표(...)를 표시합니다.

2. 생략을 초과하는 CSS 글꼴의 구체적인 구현 방법

1. 단일 행 텍스트의 생략을 초과함

단일 행 텍스트의 경우 다음 방법을 통해 누락을 초과하는 글꼴 효과를 얻을 수 있습니다.

.overflow-text {
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 溢出隐藏 */
}

위를 통해 코드를 사용하면 컨테이너 너비의 텍스트 내용이 숨겨지고 타원으로 대체됩니다.

2. 다줄 텍스트가 생략을 초과합니다

다줄 텍스트의 경우 먼저 텍스트 내용을 래핑한 다음 생략 작업을 수행해야 합니다. 구체적인 구현 코드는 다음과 같습니다.

.overflow-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 超出省略 */
}

그 중 -webkit-box-orient는 텍스트 줄 바꿈 방향을 선택하는 데 사용되고, -webkit-line-clamp는 텍스트 표시 줄 수를 제어하는 ​​데 사용되며 마지막으로 컨테이너 너비를 초과하는 내용은 숨겨지고 줄임표가 대신 사용됩니다.

3. CSS 글꼴 오버플로 누락 호환성 문제

일부 브라우저에서는 text-overflow 속성이 인식되지 않을 수 있으므로 호환성 처리를 위해 접두사를 붙여야 합니다.

.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  /* 兼容WebKit内核浏览器 */
  text-overflow: -webkit-ellipsis;
  /* 兼容非WebKit内核浏览器 */
  text-overflow: ellipsis;
}

4. 요약

위의 방법을 통해 컨테이너의 범위를 넘어서는 텍스트의 생략 효과를 쉽게 얻을 수 있으며, 페이지를 더욱 아름답고 읽기 쉽게 만들 수 있습니다. 실제 개발에서는 최상의 결과를 얻기 위해 특정 값을 조정해야 하며, 다양한 브라우저에서 올바르게 표시되도록 호환성 문제를 고려해야 합니다.

위 내용은 CSS 글꼴이 누락을 초과했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!