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설정.

때문에 여기에 문제가 발생하는 이유는 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>

유용한 참고 자료 :

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

허용되는 답변은 훌륭합니다. 그러나 여전히 %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와 크롬에서 일할 수 있지만.

자동 줄 바꿈 속성에 대한 MS 정보

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

추가 display: block;또는 display: inline-block;로#User_Apps_Content .DLD_App a

데모

한 줄 CSS를 추가하면됩니다.

.app a {
   display: inline-block;
}

부트 스트랩 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: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

포함해야합니다

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

포함해서는 안됩니다

display: inline

포함해야합니다

position: sticky

float : left를 추가 할 수도 있습니다. 이 클래스 내에서 #User_Apps_Content .DLD_App a

응답하는 동안 타원 (하나의 레인 만 취함)에 대한 긴 설명을 작성해야했기 때문에 내 솔루션은 텍스트 줄 바꿈 white-space: nowrap대신 고정 너비 대신 고정 높이를 추가 하는 것이 었습니다 .

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

이것은 다음을 허용하는 코드입니다.

overflow: hidden;
text-overflow: ellipsis;

오버플로 : 숨김이 필요합니다

나는 같은 문제에 직면했으며 Safari에서 위의 해결책 중 어느 것도 작동하지 않는 것 같습니다. Safari가 아닌 브라우저의 경우 다음과 같이 작동합니다.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Safari의 경우 이것은 나를 위해 일하는 것입니다. 브라우저가 Safari인지 확인하기위한 미디어 쿼리는 시간이 지남에 따라 변경 될 수 있으므로 미디어 쿼리가 제대로 작동하지 않는 경우에만 쿼리하십시오. line-clamp속성을 사용하면 줄임표가있는 웹에 여러 줄을 가질 수도 있습니다 ( 여기 참조) .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

평판으로 인해 언급 할 수 없으므로 다른 대답을하고 있습니다.

이 경우 display: block;설정 한 요소에서 일반적으로 제안 된 속성 을 제거해야합니다 text-overflow: ellipsis;. 그렇지 않으면 끝에 ...없이 잘립니다.

이것을 CSS 규칙에 쓰십시오.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;