반응형
오버플로:끝에 숨겨진 점
내가 "나는 큰 엉덩이를 좋아하고 거짓말을 할 수 없다"라는 문자열을 가지고 있다고 가정해 보겠습니다.overflow:hidden다음과 같은 내용이 표시됩니다.
나는 큰 엉덩이를 좋아하고 할 수 있습니다.
문자를 끊습니다.다음과 같이 표시할 수 있습니까?
난 큰 엉덩이가 좋아 그리고 난...
CSS를 사용하시겠습니까?
텍스트 오버플로: ellipsis를 사용할 수 있습니다. ellipsis는 캐니우스에 따라 모든 주요 브라우저에서 지원됩니다.
여기 jsbin에 대한 데모가 있습니다.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}<div class="cut-text">
I like big butts and I can not lie.
</div>다음 스니펫에서 문제를 확인하십시오.
div{
width : 100px;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}<div>
The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>선을 최대 3개까지 제한하려면 이 방법을 사용하십시오. 세 줄 후에 점이 표시됩니다.선을 늘리려면 -webkit-line-clamp 값을 변경하고 div 크기의 너비를 지정합니다.
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
도움이 되기를 바랍니다.
.text-with-dots {
display: block;
max-width: 98%;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>로드 시 텍스트 숨기기 및 호버에 표시
.hide-text {
width: 70px;
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
span:hover {
white-space: unset;
text-overflow: unset;
}<span class="hide-text"> How to hide text by dots and show text on hover</span>예, CSS 3의 속성을 통해. 주의: 브라우저에서는 아직 보편적으로 지원되지 않습니다.
부트스트랩 4에서 다음을 추가할 수 있습니다..text-truncate텍스트를 생략하는 클래스입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
I like big butts and I cannot lie
</span><!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* after 3 line show ... */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
<div class="cardDetaileclips">
My Name is Manoj and pleasure to help you.
</div>
</div>
</body>
</html>
<style>
.dots
{
display: inline-block;
width: 325px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
</style>
대부분의 솔루션은 정적 너비를 사용합니다.하지만 때때로 어떤 이유로 그것은 틀릴 수 있습니다.
예:저는 많은 칸이 있는 테이블을 가졌습니다.대부분은 좁은(정적 폭) 것입니다.그러나 주 열은 화면 크기에 따라 가능한 한 넓어야 합니다.
HTML:
<table style="width: 100%">
<tr>
<td style="width: 60px;">narrow</td>
<td>
<span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
dynamic column can have really long text which can be wrapped on two rows
but we just need not wrapped texts using as much space as possible
</span>
</td>
</tr>
</table>
CSS:
.cutwrap {
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 18px;
white-space: normal;
color: transparent !important;
}
.cutwrap::selection {
color: transparent !important;
}
.cutwrap:before {
content: attr(data-cutwrap);
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
}
/* different styles for links */
a.cutwrap:before {
text-decoration: underline;
color: #05c;
}
.cut-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
언급URL : https://stackoverflow.com/questions/486563/overflowhidden-dots-at-the-end
반응형
'programing' 카테고리의 다른 글
| Xcode 8.3 베타에서 "문자열 보간은 선택적인 값에 대한 디버그 설명을 생성합니다. 이것을 명시적으로 하려는 것입니까?"를 해결하는 방법은 무엇입니까? (0) | 2023.08.08 |
|---|---|
| 문자열입니다.()와 == 연산자가 정말 동일합니까? (0) | 2023.07.29 |
| PL/SQL: 스크립트 실행을 완전히 중지하는 지침이 있습니까? (0) | 2023.07.29 |
| n이 상수 값인데 intx[n]가 잘못된 이유는 무엇입니까? (0) | 2023.07.29 |
| @RestControllerAdvision 대 @ControllerAdvision (0) | 2023.07.29 |