表格单元中的自动换行

Question

I want a table that uses all the screen if necessary but does break words if they get too long.

I tried:

<table width=100%>
    <tr><td class=breaklines>   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA     
    </td></tr>
</table>

.breaklines
{
      word-wrap: break-word;
}

It does not work, the words in the table-cell are never broken.

So how to break the words in a table-cell?

Fiddle:

https://jsfiddle.net/9u0pj3hn/

Answer 1

There's a interesting trick that works for table cells, and it works for text-overflow too. It's including max-width like this:

See it working: https://jsfiddle.net/9u0pj3hn/1/

.breaklines
{
    word-wrap: break-word;
    max-width:0;
}

Answer 2

Hi You can also used this solution.

 table{ width: 100%; word-wrap:break-word; table-layout: fixed; } 

 <table width=100%> <tr><td class=breaklines> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </td></tr> </table> 

Answer 3

You need to change table-layout to fixed .

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

 table.breaklines { width: 100%; table-layout:fixed; } .breaklines { word-wrap: break-word; } 

 <table class="breaklines"> <tr><td class="breaklines"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </td></tr> </table> 

Answer 4

You can achieve the same result by using break-all . Hence if you write you code

<td style="word-break:break-all;">AAAAAAAAAAAAAAAAAAAA</td>

or

<span style="word-break:break-all;">AAAAAAAAAAAAAAAAAAAAA</span>

Then it will work. See it working: http://jsfiddle.net/johannesMt/9kmmqphx/

Answer 5

U need to set the width of the <td> in order let HTML know where to break the word. For example:

<td style="width:50px;">AAAAAA</td>