긴 텍스트 줄 바꿈 처리:프로그램 및 CSS 스타일
.text-overflow {display: block;/* 내연 대상에 */width: 125px;word-break: normal;white-space: pre-wrap;/* 줄을 바꾸지 않음*/overflow: hidden;/* 내용이 너비를 초과할 때 초과된 부분을 숨깁니다*/text-overflow: ellipsis;height: 30px;position: absolute;
<!-- : CSS -->
<c:if test="${fn:length(menuVo.chapterName) <=19}">
<span class="font-12 text-overflow menuHover" style="font-weight: bold;top: -37px;left: 20px;position: relative;z-index: 3;">${menuVo.chapterName}</span>
</c:if>
<c:if test="${fn:length(menuVo.chapterName) >19}">
<span class="font-12 text-overflow menuHover" style="font-weight: bold;top: -43px;left: 20px;position: relative;z-index: 3;height:40px;">${menuVo.chapterName}</span>
</c:if>white-space - HTML 문서의 소스 코드 레이아웃을 통해 페이지에 표시되는 텍스트의 레이아웃을 제어합니다.
수치: normal | pre | nowrap | pre-wrap | pre-line | inherit
normal: 정상적으로 변화가 없습니다. (기본 처리 방식입니다. 텍스트는 자동으로 줄을 바꿉니다. 용기 경계에 도착하면 다음 줄로 넘어갑니다.)
pre: HTML 소스 코드의 공백과 줄 바꿈 유지, pre 태그와 동일
nowrap: Br 줄 바꾸기 탭을 만나지 않으면 텍스트를 한 줄에 강제합니다.
pre-wrap:pre 속성과 같지만 용기 범위를 초과할 때 자동으로 줄을 바꿉니다
pre-line:pre 속성과 같지만 연속 빈칸을 만나면 빈칸으로 간주됩니다
inherit:상속
초기값:normal
상속성: 예
적용: 모든 요소
화이트:화이트.space:간격, 거리
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
