CSS text-overflow: ellipsis; 가 작동하지 않을 때

질문 : CSS 텍스트 오버플로 : 줄임표; 작동 안함?

---

이 간단한 CSS가 작동하지 않는 이유를 모르겠습니다.

 

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

네 번째 "테스트"즈음에 끊어야합니다

답변

---

text-overflow:ellipsis; 다음이 참일 때만 작동합니다.

• 요소의 너비는 px (픽셀)로 제한되어야합니다. % (백분율)의 너비가 작동하지 않습니다.
• overflow:hidden 및 white-space:nowrap 세트가 있어야합니다.

여기서 문제가 발생하는 이유 a width 가 제한되지 않기 때문입니다. width 설정이 있지만 요소가 display:inline (즉, 기본값)으로 설정되어 있기 때문에 무시하고 다른 것은 너비를 제한하지 않습니다.

다음 중 하나를 수행하여이 문제를 해결할 수 있습니다.

• 요소를 display:inline-block 또는 display:block (아마 전자 일 수도 있지만 레이아웃 요구 사항에 따라 다름).
• 컨테이너 요소 중 하나를 display:block 하고 해당 요소에 고정 width 또는 max-width .
• 요소를 float:left 또는 float:right (아마도 전자 일 수도 있지만 줄임표에 관한 한 동일한 효과를 가져야합니다).

display:inline-block 제안합니다. 이는 레이아웃에 최소한의 부수적 영향을 미치기 때문입니다. display:inline 과 매우 유사하게 작동하지만 다른 점들도 자유롭게 실험 해보십시오. 이러한 것들이 어떻게 상호 작용하는지 이해하는 데 도움이되도록 최대한 많은 정보를 제공하려고 노력했습니다. CSS 이해의 대부분은 다양한 스타일이 함께 작동하는 방식을 이해하는 것입니다.

여기에 얼마나 가까이 있었는지 보여주는 display:inline-block 추가 된 코드 스 니펫이 있습니다.

 

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

유용한 참고 자료 :

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

출처 : https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working