ทำไมโอเวอร์โฟลว์: ซ่อนไม่ทำงานใน <td>

ฉันมีเซลล์ตารางที่ฉันต้องการให้มีความกว้างเป็นพิเศษ อย่างไรก็ตามมันใช้ไม่ได้กับสตริงข้อความที่ไม่มีขนาดใหญ่ นี่คือกรณีทดสอบ:

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 %>) กับตารางและwhite-space: nowrap; overflow: hidden;สไตล์ของ TD จากนั้นตั้งค่าความกว้าง CSS บนองค์ประกอบของเซลล์หรือคอลัมน์ที่ถูกต้อง

อย่างมีนัยสำคัญความกว้างคอลัมน์ตารางเค้าโครงคงที่จะถูกกำหนดโดยความกว้างของเซลล์ในแถวแรกของตาราง หากมีองค์ประกอบ TH ในแถวแรกและความกว้างถูกนำไปใช้กับ TD (และไม่ใช่ TH) ดังนั้นความกว้างจะใช้กับเนื้อหาของ TD เท่านั้น (อาจมีการละเว้นพื้นที่สีขาวและล้น) คอลัมน์ตารางจะกระจายอย่างเท่าเทียมกันโดยไม่คำนึงถึงความกว้าง TD ที่ตั้งไว้ (เนื่องจากไม่มีการระบุความกว้าง [ใน TH ในแถวแรก]) และคอลัมน์จะมี [คำนวณ] ความกว้างเท่ากัน ตารางจะไม่คำนวณความกว้างคอลัมน์ตามความกว้างของ TD ในแถวถัดไป กำหนดความกว้างขององค์ประกอบเซลล์แรกที่ตารางจะพบ

อีกวิธีหนึ่งและวิธีที่ปลอดภัยที่สุดในการตั้งค่าความกว้างของคอลัมน์คือการใช้<COLGROUP>และ<COL>แท็กในตารางที่มีการตั้งค่าความกว้าง CSS ในแต่ละความกว้างคงที่ COL ความกว้างของเซลล์ที่เกี่ยวข้องกับ CSS จะเล่นดีกว่าเมื่อตารางทราบความกว้างของคอลัมน์ล่วงหน้า

ฉันไม่คุ้นเคยกับปัญหาที่เฉพาะเจาะจง แต่คุณสามารถติด div และอื่น ๆ ภายใน td และตั้งค่าให้ล้นได้

นี่คือทางออกสำหรับคุณ แต่ฉันไม่เข้าใจว่าทำไมมันถึงได้ผล:

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

กล่าวคือการห่อเนื้อหาของเซลล์ใน div

ทางออกที่ดีที่สุดคือการใส่ div ลงในเซลล์ตารางที่มีความกว้างเป็นศูนย์ เซลล์ตาราง Tbody จะสืบทอดความกว้างจากความกว้างที่กำหนดไว้ thead ตำแหน่ง: อัตรากำไรขั้นต้นสัมพันธ์และติดลบควรทำเคล็ดลับ!

นี่คือภาพหน้าจอ: 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>

คุณจะต้องตั้งค่าแอตทริบิวต์ของตาราง: widthและtable-layout: fixed;เพื่อให้ 'ล้น: ซ่อน;' คุณลักษณะทำงานอย่างถูกต้อง

Imo ใช้งานได้ดีกว่าจากนั้นใช้ divs พร้อมกับwidthแอตทริบิวต์ style โดยเฉพาะเมื่อใช้เพื่อคำนวณการปรับขนาดแบบไดนามิกตารางจะมี DOM ที่ง่ายกว่าซึ่งทำให้การจัดการง่ายขึ้นเนื่องจากไม่ต้องทำการแก้ไขสำหรับการเว้นช่องว่างและระยะขอบ

คุณไม่จำเป็นต้องตั้งค่าความกว้างสำหรับเซลล์ทั้งหมด แต่สำหรับเซลล์ในแถวแรกเท่านั้น

แบบนี้:

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

ฉันเพิ่งมีปัญหาที่คล้ายกันและต้องใช้<div>ภายในใน<td>ตอนแรก (วิธีแก้ปัญหาของ John MacIntyre ไม่ได้สำหรับฉันด้วยเหตุผลหลายประการ)

โปรดทราบว่านั่น<td><div>...</div></td>ไม่ใช่ตำแหน่งที่ถูกต้องสำหรับ div ดังนั้นฉันจึงใช้ a <span>พร้อมdisplay:block;ชุด มันตรวจสอบได้ดีในขณะนี้และใช้งานได้

ทางออกที่ง่ายที่สุดและง่ายที่สุดที่ทำงาน:

table { table-layout: fixed }

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

เพื่อให้ง่ายขึ้นฉันเสนอที่จะใส่ textarea ใน td ซึ่งมีการจัดการโดยอัตโนมัติล้น

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

จำเป็นต้องได้รับการแก้ไข

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

แสดง 123456