CSS를 사용하여 텍스트 길이 제한을 N줄로 설정

때때로 개발자는 HTML 요소의 크기에 따라 텍스트를 잘라야 합니다. 예를 들어 div 요소의 너비는 100px이고 일부 문자만 포함할 수 있습니다. 따라서 CSS를 사용하여 텍스트를 잘라야 합니다.

그러나 JavaScript를 사용하여 텍스트를자를 수 있지만 이로 인해 문제가 발생할 수 있습니다. 예를 들어 100px에 18자를 표시할 수 있지만 때로는 대문자로 인해 더 적은 문자가 표시될 수도 있습니다. 이 경우 18자를 표시하면 오버플로가 발생할 수 있습니다.

따라서 CSS를 사용하여 텍스트를 자르는 것이 더 좋은 생각입니다.

문법

사용자는 다음 구문을 사용하여 CSS를 사용하여 텍스트 제한을 N줄로 설정할 수 있습니다.

으아아아

위 구문에서는 오버플로를 숨김으로 설정하고 'text-overflow: elipsis'를 설정하여 텍스트를 자릅니다. "-webkit-line-clamp" 속성 값은 표시할 줄 수를 나타냅니다.

예 1

아래 예에서는 텍스트 한 줄만 표시하고 있습니다. 다른 텍스트는 잘라냅니다. div 요소의 너비로 300픽셀을 설정하고 오버플로로 숨김을 설정하고 텍스트 오버플로 속성으로 줄임표를 설정했습니다. 또한 "white-space" 속성과 "no-wrap" 값을 사용하여 텍스트를 한 줄에만 표시합니다.

으아아아

예 2

의 중국어 번역은 다음과 같습니다.

예 2

아래 예에서는 잘린 텍스트 N줄을 보여줍니다. 첫 번째 예와 같이 div 요소에 텍스트를 추가했습니다. 그 후에는 "white-space: no-wrap" CSS 속성을 사용하는 대신 "webkit-line-clamp" CSS 속성을 사용하여 줄 수를 설정했습니다.

출력에서 사용자는 잘린 텍스트가 세 줄만 표시되는 것을 볼 수 있습니다. 사용자는 라인 수를 변경하고 출력을 관찰할 수 있습니다.

으아아아

예 3

의 중국어 번역은 다음과 같습니다.

예 3

아래 예에서는 텍스트를 N 줄로 자르는 실시간 사용을 보여줍니다. 여기서는 HTML과 CSS를 사용하여 카드 구성 요소를 만들었습니다. 카드 왼쪽에는 이미지를, 오른쪽에는 텍스트를 추가했습니다. 또한 카드의 너비는 고정되어 있습니다.

텍스트가 넘치지 않도록 카드 오른쪽에 텍스트를 표시해야 합니다. 텍스트를 4줄로 자르면 출력에서 ​​볼 수 있습니다.

으아아아

사용자는 텍스트를 여러 줄로 자르는 방법을 배웠습니다. 'overflow:hidden' 및 'text-overflow:elipsis' CSS 속성을 사용하여 텍스트를 자를 수 있습니다. 또한 한 줄의 텍스트를 자르려면 "white-space: no-wrap"을 사용해야 하고, 텍스트를 여러 줄로 자르려면 "webkit-line-clamp:lines" CSS 속성을 사용해야 합니다.

위 내용은 CSS를 사용하여 텍스트 길이 제한을 N줄로 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!