오버플로 : 끝에 숨겨진 점

205

" 큰 엉덩이를 좋아하고 거짓말을 할 수 없습니다 "라는 문자열이 있고으로 잘라서 overflow:hidden다음과 같이 표시 한다고 가정 해 봅시다 .

나는 큰 엉덩이를 좋아하고 나는 cann

텍스트를 잘라냅니다. 이것을 다음과 같이 표시 할 수 있습니까?

나는 큰 엉덩이를 좋아하고 통조림 ...

CSS를 사용합니까?

html  css 
— 마니 넨
소스
46
이 질문은 노래를 홍보하기위한 소문입니까?
— Cyril Gupta
12
@CyrilGupta 늦게 답변해서 죄송합니다. 나는 화장실로 달려 가야했다. 귀하의 질문에 대답하기 위해 ... 예
— Joe Phillips
1
— Termininja

답변:

281

텍스트 오버플로를 사용할 수 있습니다 : 줄임표; 이는 caniuse에 따라 모든 주요 브라우저에서 지원됩니다.

다음 은 jsbin에 대한 데모 입니다.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}
<div class="cut-text">
I like big buts and I can not lie.
</div>
스 니펫 확장

— 조 필립스
소스
이것은 Firefox 15.0.1에서 작동하는 것 같습니다 : w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
— Jace
예, 최신 버전에서 작동하는 것으로 보입니다. 분명히이 대답은이 시점에서 몇 살입니다.
— Joe Phillips
Firefox는 2011 년 후반에 릴리스 된 버전 7부터이를 지원하기 시작했습니다.
— Richard Ev
1
본인의 상식을 사용하여이 답변이 투표와 의견을 바탕으로 "올바르다"고 말할 수 있습니다. 그러나 나는이 답변이 어떻게 "올바른지"실제로는 알지 못한다. 나는 모두를 사용하지 overflow: hidden;와 text-overflow: ellipsis;A의 <p>요소 (즉, 블록 요소)와 더 발견 ...(I 확실하게하고 그것이 정말로 넘쳐 것을 물론) 끝에. 나는 또한없이이 시도 overflow: hidden;부분, 또한 함께 <span>내부 요소 <p>요소 <p>요소를 가지고 overflow: hidden;와이 <span>있었다 text-overflow: ellipsis;내가하려고 아무리을,이에 .. 실패입니다
— VoidKing
2
글쎄, 나는 문제를 알고 있다고 생각한다. 나는 기반으로 오버 플로우를 제한하려고 max-height내가 한 수 없도록 white-space:설정nowrap
— VoidKing
88

문제의 다음 스 니펫을 확인하십시오. 

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>
스 니펫 확장

— 아르 준
소스
4
"공백 : nowrap;"을 추가하기위한 것 어떤 경우에는 필요할 수 있습니다
— leo
2
텍스트를 두 줄로 표시하고 사라지는 방법?
— Martian2049
1
@ Matian2040 고정 높이와 오버플로 숨겨진 스타일을 제공하여 조정할 수 있습니다.이 바이올린을 확인하십시오 jsfiddle.net/5135L4bx
— Arjun
1
오 알 겠어요 나는 노력했다. 그러나 그것은 두 줄로 끝나는 것을 의미합니다 ...
— Martian2049
1
display: inline-block;나를 위해 누락 된 구성 요소였습니다. 감사합니다.
— 세스
18

선을 최대 3 개로 제한하고 3 개의 선 후에 점이 나타나는 경우이 방법을 사용하십시오. 줄을 늘리려면 -webkit-line-clamp 값을 변경하고 div 크기의 너비를 지정하십시오.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
— 나겐 드라 마 탈라
소스
사과합니다, 어떻게 그런 단어를 제거했는지 모르겠습니다!
— Alec
크롬에서 잘 작동하지만, 노트이 파이어 폭스에서 작동하지 않습니다
— 켄 Bigler
Firefox와 같은 다른 브라우저에서 어떻게해야합니까? 편집 : stackoverflow.com/questions/33058004/…
— user3187724 10
17

잘하면 그것은 당신에게 도움이됩니다 :

.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>
스 니펫 확장

— 부 판
소스
8

부트 스트랩 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>
스 니펫 확장

— 페니 리우
소스
6 
<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>
— Cuteboy_Max
소스
3

여기에서 대부분의 솔루션은 정적 너비를 사용합니다. 그러나 때때로 어떤 이유로 잘못 될 수 있습니다.

예 : 열이 많은 테이블이 있습니다. 대부분은 좁습니다 (정적 너비). 그러나 기본 열은 가능한 넓어야합니다 (화면 크기에 따라 다름).

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;
}
— 마주
소스
3 
<!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>
— 마노 지 파텔
소스
-1

로드시 텍스트를 숨기고 호버에 표시 

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }
— 로 히트 파테
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.