오버플로 : 끝에 숨겨진 점

오버플로 : 끝에 숨겨진 점

---

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

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

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

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

CSS를 사용합니까?

---

텍스트 오버플로를 사용할 수 있습니다 : 줄임표; 이는 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>

---

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

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>

---

text-overflowCSS 3 의 속성을 통해 가능합니다. 주의 사항 : 아직 브라우저에서 보편적으로 지원되지는 않습니다.

---

선을 최대 3 개로 제한하고 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>

---

부트 스트랩 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>

---

<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;
}

---

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

<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;
  }

참고 URL : https://stackoverflow.com/questions/486563/overflowhidden-dots-at-the-end