>웹 프론트엔드 >CSS 튜토리얼 >div 또는 범위를 초과하는 경우 CSS 텍스트를 줄임표로 바꾸는 코드

div 또는 범위를 초과하는 경우 CSS 텍스트를 줄임표로 바꾸는 코드

不言
不言원래의
2018-06-11 14:42:352266검색

프로젝트에서 텍스트가 너무 길면 텍스트를 표시해야 하는 경우가 많으며, 초과된 내용을 줄임표로 대체해야 합니다. CSS 코드를 기반으로 이를 어떻게 달성할 수 있나요? 아래 스크립트하우스 에디터가 이 글을 분석해서 자세히 설명해드리겠습니다. 관심있는 친구들도 함께 공부해주세요

프로젝트에서 텍스트가 너무 길면 표시해야 하고, 남는 내용은 교체해야 하는 경우가 많습니다. 줄임표 포함:
아이디어는 다음과 같습니다.
먼저 너비를 설정한 다음 초과 부분을 숨깁니다.
초과 부분이 있으면 끝에 줄임표를 표시합니다.
텍스트 줄 바꿈을 허용하지 않습니다.
특정 CSS 코드는 다음과 같습니다.

.title{ 
width:200px; 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
word-break:keep-all; 
}

Html 코드를 작성할 필요는 없습니다. p 또는span 클래스 = "제목"이면 충분합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS 프런트 엔드에 대한 지식 요약

63줄의 HTML5 코드를 사용하여 스네이크 게임 구현

위 내용은 div 또는 범위를 초과하는 경우 CSS 텍스트를 줄임표로 바꾸는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.