Home >Web Front-end >CSS Tutorial >How to Make Table Cell Content Wrap in HTML?

How to Make Table Cell Content Wrap in HTML?

DDDOriginal: 2024-10-27 08:57:03643browse

How to Force Table Cell Content to Wrap

In the provided code, the text in the elements is stretching when submitted. To resolve this issue and ensure the text wraps within the cells, the following steps can be taken:

Solution

Table Layout:
Add table-layout:fixed to the element. This attribute specifies that the table will have a fixed layout, forcing its columns to have the specified widths.

Word Wrap:
Add word-wrap:break-word to the

elements. This property enables word wrapping within the table cells, allowing long text to break into multiple lines.

Example

<html><br><head><br>   <style><br>   table {border-collapse:collapse; table-layout:fixed; width:310px;}<br>   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}<br>   </style><br></head></p>
<p><body><br>   <table></p>
<pre class="brush:php;toolbar:false">  <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>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}</p>
<pre class="brush:php;toolbar:false">   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <table></p>
<pre class="brush:php;toolbar:false">      <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>

”

The above is the detailed content of How to Make Table Cell Content Wrap in HTML?. For more information, please follow other related articles on the PHP Chinese website!

css html break class Attribute Property JS this border table td issue word

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How can I segment circles into equal or varying sizes using CSS without JavaScript?Next article：How can I segment circles into equal or varying sizes using CSS without JavaScript?

See more

How to Make Table Cell Content Wrap in HTML?

How to Force Table Cell Content to Wrap

Solution

Example

DEMO:

Related articles