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

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단위.

This will effectively cause the element's width to be "bound" to the viewport width (browser window) and will result in a responsive content clipping. Set the vw units to a satisfying value needed.

Minimal CSS:

th{ max-width:10vw; }

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

---

Here's a runnable demo:

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>

---

Just offering an alternative as I had this problem and none of the other answers here had the desired effect I wanted. So instead I used a list. Now semantically the information I was outputting could have been regarded as both tabular data but also listed data.

So in the end what I did was:

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

So basically ul is table, li is tr, and span is td.

Then in CSS I set the span elements to be display:block; and float:left; (I prefer that combination to inline-block as it'll work in older versions of IE, to clear the float effect see: http://css-tricks.com/snippets/css/clear-fix/) and to also have the ellipses:

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

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

Then all you do is set the max-widths of your spans and that'll give the list an appearance of a table.

---

Instead of using ellipsis to solve the problem of overflowing text, I found that a disabled and styled input looked better and still allows the user to view and select the entire string if they need to.

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

It looks like a text field but is highlight-able so more user friendly

---

Check box-sizing css property of your td elements. I had problem with css template which sets it to border-box value. You need set box-sizing: content-box.

---

Leave your tables as they are. Just wrap the content inside the TD's with a span that has the truncation CSS applied.

/* 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>

---

If you don't want to set max-width to td (like in this answer), you can set max-width to div:

function so_hack(){}

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

function so_hack(){}

Note: 100% doesn't work, but 99% does the trick in FF. Other modern browsers doesn't need silly div hacks.

td {
  border: 1px solid black;
    padding-left:5px;
    padding-right:5px;
}
td>div{
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

참고URL : https://stackoverflow.com/questions/10372369/why-doesnt-css-ellipsis-work-in-table-cell