Làm cách nào để buộc nội dung bảng <td> phải bọc?

146

Đây là toàn bộ trang * bao bọc được xác định trong tệp main.css

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

Đây là toàn bộ trang:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Nó chỉ kéo dài mỗi khi tôi gửi.
Trang này là trong một div cũng. Tôi có cần đặt chiều rộng của div và bảng không?

html  css  html-table 
— Ngày lễ bác sĩ
nguồn
1
Bạn đang xác định ở wrappableđâu?
— canon
2
Đâu là .wrappablelớp được xác định? Bạn đang dùng trình duyệt nào?
— Dani
Trình duyệt đang được sử dụng đặc biệt quan trọng --- các phiên bản IE cũ không hỗ trợ max-width. Có rất nhiều điều khác có thể là vấn đề và không thể nói mà không có thêm thông tin, nhưng đó là một điều có thể bị phá vỡ.
— Chris Morgan
Về cơ bản, tôi chỉ cố gắng giữ văn bản được gửi ở trong một chiều rộng và không kéo dài bảng sau khi tôi đồng ý nó
— Doc Holiday
Điều này có thể giúp stackoverflow.com/a/26560829/1924979
— Harsh Vakharia

Câu trả lời:

291

Sử dụng table-layout:fixedtrong bảng vàword-wrap:break-word trong td.

Xem ví dụ này:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

BẢN GIỚI THIỆU:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
Mở rộng đoạn trích

— jim31415
nguồn
Bạn nên thêm thu gọn đường viền: thu gọn bit vào phần trên cùng của câu trả lời của bạn để những người đang quét trực quan câu trả lời của bạn có thể nhận được câu trả lời đầy đủ một cách nhanh chóng.
— dwoodwardgb
cho ít sửa đổi hơn bảng {biên giới sụp đổ: sụp đổ; bảng-layout: fixed; word-quấn: break-word;} bảng td {width: 100px; word-quấn: break-word;}
— Kuldeep Kumar
44

Nó làm việc cho tôi.

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

Và thuộc tính bảng là:

table { 
  table-layout: fixed;
  width: 100%
}

— Lavekush Agrawal
nguồn
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
nguồn
6
có lẽ bạn có thể giải thích mã để mọi người rõ ràng
— Federico
Nó hiển thị bảng gọn gàng, nhưng nội dung bị cắt; I E. không thể thấy một số từ nếu nội dung lớn của nó. overflow:hidden
— wpcoder
Mã hóa chiều rộng tối đa là không tốt mặc dù. Nó sẽ không mở rộng theo độ phân giải lớn, v.v. YOu muốn cho phép bảng phản hồi đúng kích thước.
— dùng959690
4

Nếu bạn đang sử dụng bảng phản hồi Bootstrap, chỉ muốn đặt chiều rộng tối đa cho một cột cụ thể và thực hiện gói văn bản, làm cho kiểu của cột này như sau cũng hoạt động

max-width:someValue;
word-wrap:break-word
— Phong Hán
nguồn
5
Lưu ý rằng max-widthphải là một pxgiá trị, không phải%
— maxedison
3

Điều này làm việc cho tôi khi tôi cần hiển thị JSON "đẹp" trong một ô:

td { white-space:pre }

Thông tin thêm về white-spacetài sản :

  • normal : Giá trị này hướng các tác nhân người dùng thu gọn các chuỗi khoảng trắng và ngắt các dòng khi cần thiết để điền vào các ô dòng.

  • pre: Giá trị này ngăn tác nhân người dùng thu gọn các chuỗi khoảng trắng.
    Các dòng chỉ bị hỏng ở các ký tự dòng mới được bảo tồn.

  • nowrap: Giá trị này thu gọn khoảng trắng như đối với normal, nhưng triệt tiêu ngắt dòng trong văn bản.

  • pre-wrap: Giá trị này ngăn tác nhân người dùng thu gọn các chuỗi khoảng trắng.
    Các dòng bị phá vỡ tại các ký tự dòng mới được bảo tồn và khi cần thiết để điền vào các hộp dòng.

  • pre-line: Giá trị này hướng các tác nhân người dùng đến các chuỗi thu gọn của khoảng trắng.
    Các dòng bị phá vỡ tại các ký tự dòng mới được bảo tồn và khi cần thiết để điền vào các hộp dòng.

(Ngoài ra, xem thêm tại nguồn .)

— ashleedawg
nguồn
0

Nếu bạn muốn sửa cột, bạn nên đặt chiều rộng. Ví dụ:

<td style="width:100px;">some data</td>

— Eugene
nguồn
1
Tôi đã thử rằng ... nó tiếp tục mở rộng bảng vì một số lý do <td id = "bình luận - $ {bình luận.id}" class = "Wrappable" style = "width: 100px"> $ {Comments.comment} </ td >
— Doc Holiday
0

Đây là một cách khác để giải quyết vấn đề nếu bạn có chuỗi dài (như tên đường dẫn tệp) và bạn chỉ muốn ngắt chuỗi trên một số ký tự nhất định (như dấu gạch chéo). Bạn có thể chèn các ký tự Unicode Zero Width Space ngay trước (hoặc sau) các dấu gạch chéo trong HTML.

— Đánh dấu Lakata
nguồn
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

Tôi đã thử nghiệm với dữ liệu nhị phân và nó hoạt động hoàn hảo ở đây.

— jaip
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.