Hướng dẫn html wrap text in table cell - html bọc văn bản trong ô của bảng

Question

Như chúng ta đã biết, nội dung của bảng có thể thay đổi cấu trúc hoặc kích thước của nó. Vì vậy, có thể có một số khó khăn với các ô bảng. Ví dụ, các từ dài trong ô bảng có thể làm cho chiều rộng của tế bào tăng hoặc các từ dài có thể vượt qua các đường viền của tế bào. Nhưng bạn có thể tránh những điều này bằng cách sử dụng Word Wrapping trên nội dung ô.

Trong đoạn trích này, chúng tôi đề xuất hai phương thức: sử dụng thuộc tính CSS Word hoặc thuộc tính Word-break.

Sử dụng thuộc tính thu hẹp biên giới để "sụp đổ" và thuộc tính đặt bảng được đặt thành "cố định" trên phần tử. Ngoài ra, chỉ định chiều rộng của bảng. Sau đó, đặt thuộc tính bao nhiêu từ thành giá trị "từ phá vỡ" của nó cho các phần tử và thêm đường viền và chiều rộng cho chúng.

Ví dụ về việc gói nội dung của ô bảng với thuộc tính Word-horp:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 310px;
      }
      table td {
        border: solid 1px #666;
        width: 110px;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>What is Lorem Ipsum?</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
        <td>2</td>
        <td>Why do we use it?</td>
        <td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </td>
      </tr>
    </table>
  </body>
</html>

Nếu bạn muốn bọc một từ trên một dòng mới, hãy sử dụng thuộc tính Word-Awrap, nhưng nếu bạn cần phá vỡ nó ở bất kỳ ký tự thích hợp nào, hãy sử dụng thuộc tính Break Word.

Ở đây, chúng tôi đặt các thuộc tính bên trái và lề phải thành "tự động" cho, sử dụng giá trị "cố định" của thuộc tính Layout bảng và chỉ định khoảng cách biên giới và chiều rộng của bảng. Đối với các phần tử, hãy thêm thuộc tính Border và đặt Word-break thành giá trị "Break-all" của nó.

Ví dụ về việc gói nội dung của ô bảng với thuộc tính phá vỡ từ:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-spacing: 0px;
        table-layout: fixed;
        margin-left: auto;
        margin-right: auto;
        width: 310px;
      }
      td {
        border: 1px solid #666;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>What is Lorem Ipsum?</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
        <td>2</td>
        <td>Why do we use it?</td>
        <td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </td>
      </tr>
    </table>
  </body>
</html>