overflow : hidden이 왜 작동하지 않습니까?

overflow : hidden이 왜 작동하지 않습니까?

---

항상 특정 너비가되고 싶은 표 셀이 있습니다. 그러나 큰 문자열의 간격이없는 텍스트에서는 작동하지 않습니다. 테스트 사례는 다음과 같습니다.

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

상자를 확장하지 않고 상자 가장자리에서 텍스트를 잘라내려면 어떻게해야합니까?

---

여기 같은 문제가 있습니다.

당신은 설정해야 table-layout:fixed 하고 뿐만 아니라 테이블 요소에 적절한 폭 overflow:hidden과 white-space: nowrap테이블 셀에.

---

예

고정 너비 열

테이블의 너비는 고정 너비 셀과 동일하거나 작아야합니다.

하나의 고정 너비 열로 :

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

고정 너비 열이 여러 개인 경우 :

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

고정 및 유동 폭 열

테이블의 너비를 설정해야 하지만 추가 너비는 단순히 유체 셀에서 가져옵니다.

여러 열로 고정 너비 및 유체 너비 :

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

---

그것이 바로 TD의 방식입니다. TD 요소의 '디스플레이'속성이 본질적으로 '블록'이 아닌 '테이블 셀'로 설정되어 있기 때문일 수 있습니다.

귀하의 경우 대안은 TD의 내용을 DIV에 포장하고 너비와 오버플로를 DIV에 적용하는 것입니다.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

처리해야 할 패딩 또는 셀 패딩 문제가있을 수 있으며 인라인 스타일을 제거하고 대신 외부 CSS를 사용하는 것이 좋습니다.하지만 시작해야합니다.

---

CSS table-layout:fixed;(때로는 width:<any px or %>)를 TABLE에 적용하고 white-space: nowrap; overflow: hidden;TD의 스타일을 적용하십시오 . 그런 다음 올바른 셀 또는 열 요소 에 CSS 너비를 설정 하십시오 .

Significantly, fixed-layout table column widths are determined by the cell widths in the first row of the table. If there are TH elements in the first row, and widths are applied to TD (and not TH), then the width only applies to the contents of the TD (white-space and overflow may be ignored); the table columns will distribute evenly regardless of the set TD width (because there are no widths specified [on TH in the first row]) and the columns will have [calculated] equal widths; the table will not recalculate the column width based on TD width in subsequent rows. Set the width on the first cell elements the table will encounter.

Alternatively, and the safest way to set column widths is to use <COLGROUP> and <COL> tags in the table with the CSS width set on each fixed width COL. Cell width related CSS plays nicer when the table knows the column widths in advance.

---

I'm not familiar with the specific issue, but you could stick a div, etc inside the td and set overflow on that.

---

Well here is a solution for you but I don't really understand why it works:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

Namely, wrapping the cell contents in a div.

---

You'll have to set the table's style attributes: width and table-layout: fixed; to let the 'overflow: hidden;' attribute work properly.

Imo this works better then using divs with the width style attribute, especially when using it for dynamic resizing calculations, the table will have a simpler DOM which makes manipulation easier because corrections for padding and margin are not required

As an extra, you don't have to set the width for all cells but only for the cells in the first row.

Like this:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

---

Best solution is to put a div into table cell with zero width. Tbody table cells will inherit their widths from widths defined the thead. Position:relative and negative margin should do the trick!

Here is a screenshot: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

---

I've just had a similar problem, and had to use the <div> inside the <td> at first (John MacIntyre's solution didn't work for me for various reasons).

Note though that <td><div>...</div></td> isn't valid placement for a div so instead I'm using a <span> with display:block; set. It validates fine now and works.

---

to make more simple i propose to put an textarea inside the td wich is manage automaticly the overflow

<td><textarea autofocus>$post_title</textarea></td>

need to be ameliorate

---

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

displays 123456

---

Easiest and simplest solution that works:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

참고URL : https://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td