how to break a long sentence without

Question

I have a table like the following .

when i add more text to the "1111111111111111111"

the table will be enlarge , how can i break the text which contain no br or space ??

<table style="width:280px">
            <tr align="left" valign="top" style="font-size: 14px;">
                <th align="left" style="width:100px;white-space: normal;">LEE, WING WING wrote:</th>
                <th style="width:20px"></th>
                <th align="left" style="width:100px;white-space: nowrap;">15-Sep-2019 12:08</th>
            </tr>
            <tr align="left" valign="top">
                <th colspan="3" style="white-space: pre-wrap; word-wrap: break-word;width:100px">1111111111111111111111111111111111111111111111111111111111</th>
            </tr>
        </table>

Possible duplicate of [Word-wrap in an HTML table](https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table) — Mike Doe, Sep 17 '19 at 07:21
Might help: [line break in table cell](https://stackoverflow.com/questions/6843412/force-line-break-in-html-table-cell) — ambianBeing, Sep 17 '19 at 07:21

Puka · Accepted Answer · 2019-09-17T08:59:15.677

You should try to use the CSS word-break property.

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

MDN - word-break

table tr th {
  word-break: break-word;
}

Below is a working sample. I took the liberty to move your embedded styles in a separate CSS stylesheet but feel free to write your styles wherever you like.

table {
  width: 280px;
}

table tr {
  font-size: 14px;
}

table th {
  border: dotted 1px red;
  width: 100px;
  white-space: normal;
}

table th:last-child {
  white-space: nowrap;
}

table tr:last-child th {
  white-space: pre-wrap;
  word-break: break-word;
}

<table>
  <tr align="left" valign="top">
    <th align="left">LEE, WING WING wrote:</th>
    <th style="width:20px"></th>
    <th align="left">15-Sep-2019 12:08</th>
  </tr>
  <tr align="left" valign="top">
    <th colspan="3">
      1111111111111111111111111111111111111111111111111111111111
    </th>
  </tr>
</table>

@OliverCheng, according to caniuse database, `word-break` is supported, even in IE6: https://caniuse.com/#feat=word-break — Puka, Sep 18 '19 at 07:46

score 0 · Answer 2 · answered Sep 17 '19 at 07:22

Use table-layout:fixed in the table and word-wrap:break-word in the td.

DEMO:

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>

score 0 · Answer 3 · answered Sep 17 '19 at 07:28

Try This:

<table style="width:280px">
        <tr align="left" valign="top" style="font-size: 14px;">
            <th align="left" style="width:100px;white-space: normal;">LEE, WING WING wrote:</th>
            <th style="width:20px"></th>
            <th align="left" style="width:100px;white-space: nowrap;">15-Sep-2019 12:08</th>
        </tr>
        <tr align="left" valign="top">
            <th colspan="3" style="white-space: pre-wrap; word-break: break-all; width:100px">1111111111111111111111111111111111111111111111111111111111</th>
        </tr>
    </table>

how to break a long sentence without

3 Answers3

DEMO: