타원을 넘어서는 일부 CSS3 팁에 대한 심층 분석

CSS3의 텍스트 오버플로 속성은 요소의 텍스트 내용이 컨테이너 크기를 초과할 때 표시되는 방법을 제어할 수 있는 매우 유용한 기능입니다. 기본적으로 컨테이너 외부의 텍스트는 줄임표(...)로 대체됩니다. 이 글에서 우리는 줄임표를 넘어서 CSS3의 몇 가지 요령과 사용법에 대해 알아볼 것입니다.

기본 사용법

먼저 text-overflow 속성의 기본 사용법을 살펴보겠습니다. 여기에는 세 가지 선택적 값이 있습니다.

• clip: 타원을 표시하지 않고 컨테이너 너머의 텍스트를 자릅니다.
• ellipsis: 컨테이너 끝에 줄임표를 표시합니다. (기본값)
• string: 컨테이너 끝에 지정된 문자열을 표시합니다.

다음은 컨테이너 끝에 줄임표를 표시하는 방법을 보여주는 간단한 예입니다.

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

이렇게 하면 200픽셀 너비의 div에 텍스트 줄이 표시됩니다. 텍스트가 컨테이너 크기를 초과하면 잘리고 타원으로 대체됩니다.

의사 요소 앞이나 뒤에 사용하여 줄임표를 추가하세요.

텍스트가 줄임표를 초과한다는 것을 인식하려면 스타일 속성 text-overflow를 사용하세요. 일반적으로 줄임표는 컨테이너 끝에 추가됩니다. 이 솔루션은 가장 간단하면서도 가장 일반적인 접근 방식입니다. 더 많은 하이라이트를 만들고 싶다면 더 혁신적인 접근 방식을 생각해야 합니다.

CSS 의사 요소 :before 또는 :after를 사용하면 쉽게 줄임표를 추가할 수 있습니다. 이 방법을 사용하면 일반적으로 특수 효과(예: 왼쪽 정렬 줄임표 텍스트)를 얻을 수 있습니다. 스타일을 추가하면 의사 요소가 표시되는 방식을 제어하고 원본 텍스트의 표시를 재정의할 수 있습니다.

다음 코드는 컨테이너 오른쪽에 줄임표를 추가하는 방법을 보여줍니다.

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

이렇게 하면 컨테이너 오른쪽에 줄임표가 추가됩니다. 절대 위치 지정을 사용하여 컨테이너의 오른쪽 상단 모서리에 의사 요소를 배치하고 타원이 완전히 표시되도록 흰색 배경과 패딩을 추가했습니다.

CSS3 calc() 함수를 사용하여 줄임표에 사용 가능한 공간을 제어합니다.

CSS3의 calc() 함수를 사용하면 CSS에서 수학적 표현을 사용할 수 있는데, 이는 크기나 간격을 동적으로 계산하는 데 매우 유용합니다. 타원을 초과하는 경우 calc() 함수를 사용하여 텍스트와 타원이 완전히 표시될 수 있도록 사용 가능한 공간을 제어할 수 있습니다.

다음 코드는 너비가 300픽셀인 컨테이너에 텍스트와 타원을 표시하는 방법을 보여줍니다.

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

위 코드에서는 calc() 함수와 범위 요소라는 두 가지 주요 스타일을 사용했습니다. Span 요소는 inline-block으로 설정되어 다른 요소의 렌더링에 영향을 주지 않고 텍스트가 한 줄을 차지할 수 있습니다. max-width 속성을 사용하여 범위 요소의 최대 너비를 컨테이너 너비에서 줄임표 너비를 뺀 값으로 설정합니다. 이렇게 하면 텍스트가 컨테이너의 사용 가능한 공간을 초과하지 않습니다.

CSS3 Flexbox 사용

CSS3의 Flexbox 레이아웃은 매우 유용합니다. CSS를 사용하여 유연하고 반응성이 뛰어난 레이아웃을 만들 수 있습니다. 컨테이너에 여러 줄의 텍스트를 표시해야 하고 마지막 줄에 타원을 추가하려는 경우 Flexbox 레이아웃을 사용하는 것이 좋습니다.

다음 코드는 Flexbox 레이아웃을 사용하여 300픽셀 너비 컨테이너에 여러 줄의 텍스트를 표시하고 마지막 줄에 줄임표를 추가하는 방법을 보여줍니다.

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

위 코드에서는 세 가지 주요 스타일 속성을 사용합니다. display : flex , 플렉스 방향: 열 및 플렉스: 1. Flex 컨테이너는 flex-direction:column으로 설정되어 하위 요소가 수직으로 정렬됩니다. 각 단락 요소는 컨테이너의 전체 높이를 차지하도록 flex: 1로 설정됩니다.

마지막 단락 요소는 오버플로: 표시로 설정되어 컨테이너를 오버플로하고 모든 텍스트를 표시합니다. 또한 텍스트가 타원으로 잘리지 않도록 text-overflow 속성을 빈 문자열로 설정했습니다. 이렇게 하면 마지막 단락 요소의 텍스트가 자연스럽게 컨테이너의 마지막 줄에서 오버플로되고 Flexbox 레이아웃이 자동으로 마지막 줄에 줄임표를 추가합니다.

요약

이 기사에서는 타원을 넘어서 CSS3의 몇 가지 팁과 사용법을 살펴보았습니다. 기본 텍스트 오버플로 속성 외에도 의사 요소와 CSS3 calc() 함수를 사용하여 보다 창의적인 효과를 얻는 방법도 보여줍니다. 또한 CSS3 Flexbox 레이아웃을 사용하여 여러 줄의 텍스트를 표시하고 타원을 추가하는 방법도 다루었습니다. 어떤 기술을 사용하든 텍스트를 표시할 때 모범 사례를 사용해야 합니다. 이렇게 하면 텍스트가 다양한 상황에서 잘 렌더링됩니다.

위 내용은 타원을 넘어서는 일부 CSS3 팁에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!