Gói văn bản trong thẻ <td>

Tôi muốn bọc một số văn bản được thêm vào một <td>yếu tố. Tôi đã thử với style="word-wrap: break-word;" width="15%". Nhưng nó không bao bọc văn bản. Có bắt buộc phải cung cấp cho nó 100% chiều rộng? Tôi có các điều khiển khác để hiển thị để chỉ có 15% chiều rộng có sẵn.

Để bọc văn bản TD

Kiểu bàn đầu tiên

table{
    table-layout: fixed;
}

sau đó đặt TD Style

td{
    word-wrap:break-word
}

Các bảng HTML hỗ trợ kiểu css "bố trí bảng: cố định" để ngăn tác nhân người dùng điều chỉnh độ rộng cột với nội dung của chúng. Bạn có thể muốn sử dụng nó.

Tôi tin rằng bạn đã bắt được 22 bàn. Các bảng là tuyệt vời để gói nội dung trong một cấu trúc bảng và chúng thực hiện một công việc "kéo dài" tuyệt vời để đáp ứng nhu cầu của nội dung mà chúng chứa.

Theo mặc định, các ô của bảng sẽ kéo dài để phù hợp với nội dung ... do đó văn bản của bạn chỉ làm cho nó rộng hơn.

Có một vài giải pháp.

1.) Bạn có thể thử đặt độ rộng tối đa trên TD.

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

2.) Bạn có thể thử đặt văn bản của mình trong một phần tử gói (ví dụ: một khoảng) và đặt các ràng buộc cho nó.

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

Xin lưu ý rằng các phiên bản IE cũ hơn không hỗ trợ độ rộng tối thiểu / tối đa.

Vì IE không hỗ trợ chiều rộng tối đa, bạn sẽ cần thêm một bản hack nếu bạn muốn buộc nó. Có một số cách để thêm hack, đây chỉ là một cách.

Khi tải trang, chỉ dành cho IE6, lấy chiều rộng được hiển thị của bảng (tính bằng pixel), sau đó lấy 15% số đó và áp dụng chiều rộng đó cho TD đầu tiên trong cột đó (hoặc TH nếu bạn có tiêu đề) một lần nữa, tính bằng pixel .

table-layout:fixedsẽ giải quyết vấn đề mở rộng tế bào, nhưng sẽ tạo ra một vấn đề mới. IE theo mặc định sẽ ẩn tràn nhưng Mozilla sẽ kết xuất nó bên ngoài hộp.

Một giải pháp khác là sử dụng: 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;
}

Tín dụng vào http://www.blakems.com/archives/000077.html

Điều này làm việc cho tôi với một số khung css (thiết kế vật liệu lite [MDL]).

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

td {
  word-wrap: break-word;
}

sử dụng word-breaknó có thể được sử dụng mà không tạo kiểu tóc 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>

Điều này hoạt động thực sự tốt:

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

Bạn có thể sử dụng cùng một chiều rộng cho tất cả <div, hoặc điều chỉnh độ rộng trong từng trường hợp để ngắt văn bản của bạn bất cứ nơi nào bạn muốn.

Bằng cách này, bạn không phải đánh lừa với độ rộng bảng cố định hoặc css phức tạp.

Tôi đã có một số của tôi tdvới:

white-space: pre;

Điều này đã giải quyết nó cho tôi:

white-space: pre-wrap;

Để làm cho chiều rộng của ô giống hệt như từ dài nhất của văn bản, chỉ cần đặt chiều rộng của ô thành 1px

I E

td {
  width: 1px;
}

Đây là thử nghiệm và tôi đã biết về điều này trong khi thực hiện thử nghiệm và lỗi

Fiddle trực tiếp: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Có thể điều này có thể hoạt động, nhưng nó có thể gây ra một chút phiền toái tại một thời điểm nào đó trong tương lai (nếu không phải ngay lập tức).

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

Lý do căn bản spanlà, như được chỉ ra bởi những người khác, <td>thông thường sẽ mở rộng để phù hợp với nội dung, trong khi đó <span>có thể được đưa ra - và dự kiến ​​sẽ giữ chiều rộng đã đặt; những overflow: hiddennhằm mục đích, nhưng có thể không, hide gì nếu không sẽ gây ra sự <td>mở rộng.

Tôi khuyên bạn nên sử dụng thuộc titletính của khoảng để hiển thị văn bản hiện diện (hoặc bị cắt) trong ô trực quan, để văn bản vẫn có sẵn (và nếu bạn không muốn / cần mọi người xem nó, thì tại sao lại có nó ở nơi đầu tiên, tôi đoán ...).

Ngoài ra, nếu bạn xác định chiều rộng cho td {...}td sẽ mở rộng (hoặc có khả năng hợp đồng, nhưng tôi nghi ngờ nó) để lấp đầy chiều rộng ngụ ý của nó (như tôi thấy nó có vẻ như vậy table-width/number-of-cells), chiều rộng bảng được chỉ định dường như không tạo ra cùng một vấn đề

Nhược điểm là đánh dấu bổ sung được sử dụng để trình bày.

Trên thực tế gói văn bản xảy ra tự động trong bảng. Sai lầm mà mọi người cam kết trong khi thử nghiệm là giả định giả định một chuỗi dài như "ggggggggggggggggggggggggggggggggggggggggggggggg" và phàn nàn rằng nó không bao bọc. Thực tế không có từ nào trong tiếng Anh dài đến thế và thậm chí nếu có, có một cơ hội mờ nhạt rằng nó sẽ được sử dụng trong đó <td>.

Hãy thử kiểm tra với các câu như "Phản đối là mê tín trong các tình huống định trước".

Áp dụng các lớp cho TD của bạn, áp dụng các chiều rộng thích hợp (nhớ để lại một trong số chúng không có chiều rộng để nó giả định phần còn lại của chiều rộng), sau đó áp dụng các kiểu thích hợp. Sao chép và dán mã dưới đây vào một trình soạn thảo và xem trong trình duyệt để xem nó hoạt động.

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