CSS 줄임표가 표 셀에서 작동하지 않는 이유는 무엇입니까?

다음 예제를 고려하십시오 : ( live demo here )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

출력은 다음과 같습니다. width = 139 이며 줄임표는 나타나지 않습니다.

내가 여기서 무엇을 놓치고 있습니까?

분명히 다음을 추가하십시오.

td {
  display: block; /* or inline-block */
}

문제도 해결합니다.

또 다른 가능한 해결책은 table-layout: fixed;테이블 에 설정 하고 테이블을 설정하는 것 width입니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/fd3Zx/5/

두는 것도 중요합니다

table-layout:fixed;

포함 테이블에서 IE9 (최대 너비를 사용하는 경우)에서도 잘 작동합니다.

앞에서 말했듯 td { display: block; }이 사용할 수는 있지만 테이블 사용의 목적을 상실합니다.

사용할 수는 table { table-layout: fixed; }있지만 일부 열에 대해 다르게 동작하기를 원할 수도 있습니다.

따라서 원하는 것을 달성하는 가장 좋은 방법은 텍스트를 a로 감싸고 다음 <div>과 같이 CSS를 <div>(가 아닌 <td>)에 적용하는 것입니다.

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

max-width대신에 사용해보십시오width , 테이블은 여전히 자동으로 너비를 계산합니다.

ie11(ie8 호환 모드) 에서도 작동 합니다.

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

데모 페이지

동적 너비가있는 테이블의 경우 만족스러운 결과를 생성하는 아래 방법을 찾았습니다. 각각의 <th>(가)의 내용을 랩하는 내부 포장 요소가 있어야 손질 텍스트 기능을 가지고 싶다고되는 <th>수 있도록 text-overflow작업을합니다.

진짜 트릭은 설정하는 것입니다 max-width합니다 (에 <th>에) vw단위 .

이렇게하면 요소의 너비가 뷰포트 너비 (브라우저 창)에 "바인딩"되어 응답 성있는 컨텐트 클리핑이 발생합니다. vw단위를 필요한 값으로 설정하십시오 .

최소 CSS :

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

실행 가능한 데모는 다음과 같습니다.

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

내가이 문제를 겪었을 때 대안을 제공하고 여기에 다른 대답은 내가 원하는 효과를 얻지 못했습니다. 대신 목록을 사용했습니다. 이제 의미 적으로 출력 한 정보는 테이블 형식 데이터 일뿐 아니라 나열된 데이터로 간주 될 수있었습니다.

결국 내가 한 일은 :

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

따라서 기본적으로 ulis table, liis tr및 spanis td입니다.

그런 다음 CSS에서 내가 설정 span될 요소 display:block;와 float:left;(나에게 그 조합을 선호하는 inline-block플로트 효과를 볼 취소는, IE의 이전 버전에서 작동 하겠지만를 : http://css-tricks.com/snippets/css/clear- 수정 / ) 및 타원도 갖습니다.

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

그런 다음 max-widths스팬 범위를 설정 하면 목록에 테이블 모양이 나타납니다.

텍스트 넘침 문제를 해결하기 위해 줄임표를 사용하는 대신 비활성화되고 스타일이 지정된 입력이 더 좋아 보이고 사용자가 필요한 경우 전체 문자열을보고 선택할 수 있다는 것을 알았습니다.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

텍스트 필드처럼 보이지만 강조 할 수 있으므로 더 사용자 친화적입니다.

요소 box-sizing의 CSS 속성을 확인하십시오 td. CSS 템플릿에 문제가있어 border-box값으로 설정했습니다 . 설정이 필요합니다 box-sizing: content-box.

테이블을 그대로 둡니다. 잘린 CSS가 적용된 범위로 TD 내부의 내용을 래핑하십시오.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

max-width를 td로 설정하지 않으려면 ( 이 답변 과 같이 ) max-width를 div로 설정할 수 있습니다.

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

참고 : 100 %는 작동하지 않지만 99 %는 FF에서 트릭을 수행합니다. 다른 최신 브라우저에는 바보 같은 div 해킹이 필요하지 않습니다.

td {
  테두리 : 1px 검은 색;
    왼쪽 여백 : 5px;
    오른쪽 여백 : 5px;
}
td> div {
    최대 폭 : 99 %;
    오버플로 : 숨겨진;
    텍스트 오버플로 : 줄임표;
    공백 : nowrap;

}