ตัดข้อความในแท็ก <td>

ฉันต้องการตัดข้อความบางส่วนที่เพิ่มลงใน<td>องค์ประกอบ ฉันได้ลองกับstyle="word-wrap: break-word;" width="15%". แต่ไม่ได้ตัดข้อความ จำเป็นต้องให้ความกว้าง 100% หรือไม่? ฉันมีการควบคุมอื่น ๆ ที่จะแสดงดังนั้นจึงมีความกว้างเพียง 15% เท่านั้น

เพื่อตัดข้อความ TD

รูปแบบตารางชุดแรก

table{
    table-layout: fixed;
}

จากนั้นตั้งค่า TD Style

td{
    word-wrap:break-word
}

ตาราง HTML สนับสนุนรูปแบบ css "table-layout: fixed" ที่ป้องกันไม่ให้ตัวแทนผู้ใช้ปรับความกว้างของคอลัมน์ให้เข้ากับเนื้อหา คุณอาจต้องการใช้มัน

ฉันเชื่อว่าคุณได้พบกับ 22 ตาราง ตารางเหมาะอย่างยิ่งสำหรับการรวมเนื้อหาไว้ในโครงสร้างแบบตารางและสามารถ "ยืด" ได้อย่างยอดเยี่ยมเพื่อตอบสนองความต้องการของเนื้อหา

ตามค่าเริ่มต้นเซลล์ตารางจะยืดออกเพื่อให้พอดีกับเนื้อหา ... ดังนั้นข้อความของคุณจะทำให้กว้างขึ้น

มีวิธีแก้ปัญหาเล็กน้อย

1. ) คุณสามารถลองตั้งค่าความกว้างสูงสุดบน TD

<td style="max-width:150px;">

2. ) คุณสามารถลองใส่ข้อความของคุณในองค์ประกอบการตัด (เช่นช่วง) และตั้งค่าข้อ จำกัด ได้

<td><span style="max-width:150px;">Hello World...</span></td>

โปรดทราบว่า IE เวอร์ชันเก่าไม่รองรับ min / max-width

เนื่องจาก IE ไม่รองรับความกว้างสูงสุดคุณจะต้องเพิ่มแฮ็คหากต้องการบังคับ มีหลายวิธีในการเพิ่มแฮ็กนี่เป็นเพียงวิธีเดียว

ในการโหลดหน้าสำหรับ IE6 เท่านั้นให้รับความกว้างที่แสดงผลของตาราง (เป็นพิกเซล) จากนั้นรับ 15% ของจำนวนนั้นและใช้เป็นความกว้างกับ TD แรกในคอลัมน์นั้น (หรือ TH หากคุณมีส่วนหัว) อีกครั้งเป็นพิกเซล .

table-layout:fixedจะแก้ไขปัญหาเซลล์ที่ขยายตัว แต่จะสร้างเซลล์ใหม่ โดยค่าเริ่มต้น IE จะซ่อนการล้น แต่ Mozilla จะแสดงผลนอกกรอบ

อีกวิธีหนึ่งคือการใช้: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

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

เครดิตhttp://www.blakems.com/archives/000077.html

ใช้word-breakก็สามารถใช้งานได้โดยไม่ต้องจัดแต่งทรงผมtableเพื่อtable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

สิ่งนี้ใช้ได้ผลสำหรับฉันกับเฟรมเวิร์ก css (material design lite [MDL])

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

สิ่งนี้ใช้งานได้ดีจริงๆ:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

คุณสามารถใช้ความกว้างเท่ากันสำหรับทั้งหมดของคุณ<divหรือปรับความกว้างในแต่ละกรณีเพื่อทำลายข้อความของคุณได้ทุกที่ที่คุณต้องการ

วิธีนี้ทำให้คุณไม่ต้องใช้ความกว้างของตารางคงที่หรือ css ที่ซับซ้อน

ฉันมีบางส่วนของฉันtdกับ:

white-space: pre;

สิ่งนี้แก้ไขให้ฉัน:

white-space: pre-wrap;

หากต้องการทำให้ความกว้างของเซลล์เหมือนกับคำที่ยาวที่สุดของข้อความเพียงตั้งค่าความกว้างของเซลล์เป็น 1px

กล่าวคือ

td {
  width: 1px;
}

นี่เป็นการทดลองและฉันได้รู้เกี่ยวกับเรื่องนี้ขณะทำการลองผิดลองถูก

ซอสด: http://jsfiddle.net/harshjv/5e2oLL8L/2/

เป็นไปได้ว่าวิธีนี้อาจได้ผล แต่อาจเป็นเรื่องที่น่ารำคาญเล็กน้อยในอนาคต (หากไม่เกิดขึ้นในทันที)

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

เหตุผลspanก็คือตามที่ผู้อื่นชี้ไว้โดย<td>ทั่วไปแล้วa จะขยายเพื่อรองรับเนื้อหาในขณะที่<span>สามารถกำหนดได้ - และคาดว่าจะคงไว้ซึ่งความกว้างที่ตั้งไว้ overflow: hiddenมีวัตถุประสงค์เพื่อ แต่อาจจะไม่ซ่อนสิ่งที่จะเป็นอย่างอื่นทำให้เกิด<td>การขยายตัว

ฉันขอแนะนำให้ใช้titleคุณสมบัติของช่วงเวลาเพื่อแสดงข้อความที่มีอยู่ (หรือถูกตัด) ในเซลล์ภาพเพื่อให้ข้อความนั้นยังคงมีอยู่ (และถ้าคุณไม่ต้องการ / ต้องการให้คนอื่นเห็นทำไมต้องมี ในตอนแรกฉันเดาว่า ... )

นอกจากนี้หากคุณกำหนดความกว้างสำหรับtd {...}td จะขยาย (หรืออาจหดได้ แต่ฉันสงสัยว่ามัน) เพื่อเติมเต็มความกว้างโดยนัย (ตามที่ฉันเห็นมันดูเหมือนจะเป็นtable-width/number-of-cells) ความกว้างของตารางที่ระบุดูเหมือนจะไม่สร้าง ปัญหาเดียวกัน

ข้อเสียคือมาร์กอัปเพิ่มเติมที่ใช้สำหรับการนำเสนอ

จริงๆแล้วการตัดข้อความเกิดขึ้นโดยอัตโนมัติในตาราง ความผิดพลาดที่เกิดขึ้นในขณะทดสอบคือสมมติว่ามีสตริงยาว ๆ เช่น "ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ในทางปฏิบัติไม่มีคำใดในภาษาอังกฤษที่ยาวขนาดนี้และแม้ว่าจะมี แต่ก็มีโอกาส<td>เล็กน้อยที่จะใช้ในคำนั้น

ลองทดสอบด้วยประโยคเช่น "การโต้แย้งเป็นเรื่องโชคลางในสถานการณ์ที่กำหนดไว้ล่วงหน้า"

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>