이 간단한 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설정.
때문에 여기에 문제가 발생하는 이유는 width당신의 a요소가 제한되지 않습니다. 당신은해야 할 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>유용한 참고 자료 :
답변
허용되는 답변은 훌륭합니다. 그러나 여전히 %width를 사용 하여 얻을 수 text-overflow: ellipsis있습니다. 해결책은 간단합니다.
display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */당신이 사용할 때마다 보인다 calc최종 값이, 결과적으로 변환 절대 픽셀 렌더링되고, 80%같은 것으로 800pxA에 대한 1000px-width 컨테이너입니다. 따라서을 사용하는 대신을 width: [YOUR PERCENT]%사용하십시오 width: calc([YOUR PERCENT]%).
답변
따라서 display: flex컨테이너 내부에서 줄임표를 사용하는 데 문제가 있기 때문에이 질문에 도달 min-width: 0하면 이미 상위 항목을 오버 플로우하는 최상위 컨테이너에 추가 하십시오.overflow: hidden 어떻게 작동하는지 확인하십시오.
aj-foster 의이 코드 펜 에 대한 자세한 내용과 실제 예제 . 내 경우에는 트릭을 완전히 수행했습니다.
답변
또한 IE10 이하에서는 정상word-wrap 으로 설정되어 있는지 확인하십시오 .
아래 참조 된 표준은이 속성의 동작을 “텍스트 랩”속성의 설정에 의존하는 것으로 정의합니다. 그러나 Internet Explorer는 “text-wrap”속성을 지원하지 않기 때문에 wordWrap 설정은 Windows Internet Explorer에서 항상 유효합니다.
따라서 제 경우에는 (단속적으로 또는 기본적으로?) 중단 단어word-wrap 로 설정되었습니다.text-overflow IE에서 FF와 크롬에서 일할 수 있지만.
답변
anchor, span… 태그는 인라인 요소 인라인 요소의 경우 기본적으로 width속성이 작동하지 않습니다는. 따라서 요소를 하나 inline-block이상의 block level요소 로 변환해야 합니다
답변
줄임표가 작동하려면 정보 뒤에 작성된 네 줄을 포함하십시오.
.app a
{
color: #fff;
font: bold 15px/18px Arial;
height: 18px;
margin: 0 5px 0 5px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 140px;
/*
Note: The Below 4 Lines are necessary for ellipsis to work.
*/
display: block;/* Change it as per your requirement. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}