반응형
div 내에서 너무 긴 텍스트 자르기
<div style="display:inline-block;width:100px;">
very long text
</div>
순수한 CSS를 사용하여 다음 새 줄에 표시되지 않고 너무 긴 텍스트를 자르고 최대 100px 만 표시하는 방법
<div class="crop">longlong longlong longlong longlong longlong longlong </div>
이것은 내가 생각할 수있는 한 가지 가능한 접근 방식입니다.
.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}
이렇게하면 긴 텍스트가 여전히 줄 바꿈되지만 overflow
설정 으로 인해 표시되지 않으며 line-height
동일한 설정 height
을 통해 한 줄만 표시되도록합니다.
여기 데모 와 대화 형 예제와 함께 멋진 오버플로 속성 설명을 참조하십시오 .
당신이 사용할 수있는:
overflow:hidden;
영역 외부의 텍스트를 숨 깁니다.
마지막 문자가 잘릴 수 있으므로 마지막 문자의 일부가 계속 표시됩니다. 더 좋은 방법은 끝에 줄임표를 표시하는 것입니다. 다음을 사용하여 수행 할 수 있습니다 text-overflow
.
overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}
상대 단위를 사용하지 않는 이유는 무엇입니까?
.cropText {
max-width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
아래 코드는 사용자가 결정한 고정 너비로 텍스트를 숨 깁니다. 반응 형 디자인에는 적합하지 않습니다.
.CropLongTexts {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
최신 정보
(모바일) 장치에서 텍스트가 (고정 너비)로 인해 서로 섞인 것을 발견했습니다 ... 그래서 위의 코드를 편집하여 다음과 같이 반응 적으로 숨겨졌습니다.
.CropLongTexts {
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
(최대 너비)는 텍스트가 (화면 크기)에 상관없이 반응 적으로 숨겨지고 서로 섞이지 않도록합니다.
참고 URL : https://stackoverflow.com/questions/3695435/crop-text-too-long-inside-div
반응형
'programing' 카테고리의 다른 글
php.ini 파일 (xampp)을 찾는 방법 (0) | 2020.10.21 |
---|---|
FileNameExtensionFilter와 함께 File.listFiles 사용 (0) | 2020.10.20 |
Connect 3.0 지원 중단 경고를 제거하는 방법은 무엇입니까? (0) | 2020.10.20 |
Intent.ACTION_GET_CONTENT에서 반환 된 URI에서 파일 이름을 추출하는 방법은 무엇입니까? (0) | 2020.10.20 |
엔티티 이름은 엔티티 참조에서 '&'바로 뒤에 와야합니다. (0) | 2020.10.20 |