프로젝트에서 텍스트가 너무 길면 텍스트를 표시해야 하는 경우가 많으며, 초과된 내용을 줄임표로 대체해야 합니다. CSS 코드를 기반으로 이를 어떻게 달성할 수 있나요? 아래 스크립트하우스 에디터가 이 글을 분석해서 자세히 설명해드리겠습니다. 관심있는 친구들도 함께 공부해주세요
프로젝트에서 텍스트가 너무 길면 표시해야 하고, 남는 내용은 교체해야 하는 경우가 많습니다. 줄임표 포함:
아이디어는 다음과 같습니다.
먼저 너비를 설정한 다음 초과 부분을 숨깁니다.
초과 부분이 있으면 끝에 줄임표를 표시합니다.
텍스트 줄 바꿈을 허용하지 않습니다.
특정 CSS 코드는 다음과 같습니다.
.title{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all; }
Html 코드를 작성할 필요는 없습니다. p 또는span 클래스 = "제목"이면 충분합니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
63줄의 HTML5 코드를 사용하여 스네이크 게임 구현
위 내용은 div 또는 범위를 초과하는 경우 CSS 텍스트를 줄임표로 바꾸는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!