ทำไมจุดไข่ปลา CSS ไม่ทำงานในเซลล์ตาราง

ลองพิจารณาตัวอย่างต่อไปนี้: ( การสาธิตสดที่นี่ )

$(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; }แต่บางทีคุณอาจต้องการให้มันทำงานแตกต่างกันไปสำหรับบาง colums

ดังนั้นวิธีที่ดีที่สุดในการบรรลุสิ่งที่คุณต้องการคือการห่อข้อความของคุณใน<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;
}

นี่คือตัวอย่างของ runnable:

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>

ดังนั้นโดยทั่วไปulคือtable, liเป็นtrและเป็นspantd

จากนั้นใน 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 template ซึ่งตั้งborder-boxค่าเป็น value box-sizing: content-boxคุณจำเป็นต้องตั้ง

ออกจากตารางของคุณตามที่เป็น เพียงห่อเนื้อหาภายในของ TD ด้วยการขยายที่ใช้ CSS การตัดทอน

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

หากคุณไม่ต้องการตั้งค่าความกว้างสูงสุดเป็น td (เหมือนในคำตอบนี้ ) คุณสามารถตั้งค่าความกว้างสูงสุดเป็น div:

function so_hack(){}

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

function so_hack(){}

หมายเหตุ: 100% ไม่ทำงาน แต่ 99% ทำเคล็ดลับใน FF เบราว์เซอร์สมัยใหม่อื่น ๆ ไม่ต้องการแฮ็ก div div

td {
  เส้นขอบ: สีดำทึบ 1px;
    padding ซ้าย: 5px;
    padding ขวา: 5px;
}
td> div {
    ความกว้างสูงสุด: 99%;
    ล้น: ซ่อนอยู่;
    ข้อความมากเกินไป: จุดไข่ปลา;
    พื้นที่สีขาว: nowrap;

}