CSS에서 타원 너머 두 줄을 얻는 방법

CSS에서는 요소에 두 줄 이상의 텍스트를 표시해야 하는 경우가 있는데, 모든 텍스트가 표시되는 것을 원하지 않는 경우에는 "줄임표 너머 두 줄" 방법을 사용할 수 있습니다.

CSS에서는 text-overflow 및 white-space 속성을 사용하여 이 효과를 얻을 수 있습니다. text-overflow는 텍스트가 컨테이너를 초과할 때 스타일을 설정하는 데 사용되며, 공백은 텍스트가 줄 바꿈 없이 표시되는 방법을 제어하는 ​​데 사용됩니다.

먼저 다음 예와 같이 고정 너비 컨테이너에 두 줄로 설정해야 하는 텍스트를 넣습니다.

<div class="container">这是需要超过两行的文本内容</div>

그런 다음 CSS에 다음 스타일을 추가합니다.

.container {
  width: 200px;       /* 容器宽度 */
  height: 48px;       /* 容器高度，即两行高度 */
  overflow: hidden;   /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出内容用省略号代替 */
  white-space: nowrap; /* 不换行 */
}

이 방법으로 텍스트를 얻을 수 있습니다. 두 줄 이상의 내용은 원래 두 줄의 높이를 유지하면서 "..." 형식을 생략합니다.

text-overflow 및 공백은 가로채기된 후에만 텍스트에 대해서만 작동한다는 점에 주목할 가치가 있으므로 컨테이너의 텍스트 스타일을 설정하려면 다른 관련 속성을 동시에 사용해야 합니다. 글꼴 크기, 줄 높이 등과 같은

CSS는 줄임표를 초과하는 두 줄 외에도 한 줄 줄임표, 여러 줄 줄임표 등 잘림 방법을 초과하는 일련의 유사한 텍스트를 제공합니다. 개발자는 실제 필요에 따라 선택하고 적용할 수 있습니다.

일반적으로 CSS의 타원 너머 방법은 너무 많은 공간을 차지하지 않고도 텍스트 콘텐츠를 더 아름답고 읽기 쉽게 만드는 데 도움이 될 수 있습니다.

위 내용은 CSS에서 타원 너머 두 줄을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!