반응형 웹사이트의 CSS에서 문자 제한을 어떻게 만들 수 있나요?

반응형 웹사이트를 위한 CSS에서 문자 제한 만들기

반응형 웹사이트를 디자인할 때 텍스트 길이를 제어하는 ​​것이 중요합니다. 큰 화면에서 텍스트가 넘치지 않도록 문장 길이를 특정 문자 수로 제한해야 할 수도 있습니다.

이를 달성하려면 CSS의 최대 너비를 사용하여 "잘라내기" 방법을 사용할 수 있습니다. 오버플로 줄임표 속성. 이 기술에는 텍스트의 최대 너비를 설정하고 텍스트가 잘렸음을 나타내기 위해 줄임표(...)를 추가하는 작업이 포함됩니다.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75ch; /* Adjust to desired character limit */
}

예:

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

이 기술을 사용하면 레이아웃을 방해하지 않고 다양한 화면 크기에서 지정된 문자 제한 내에서 텍스트가 줄바꿈됩니다.

위 내용은 반응형 웹사이트의 CSS에서 문자 제한을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!