All geek questions in one place

CSS Store the tabular cell in the extension and truncation of long text.

Can someone tell me why this doesn't truncate the text? the last cell only continues to grow. I do not want the cells to grow above the permissible percentage.

<HTML> <TABLE id=section1 width="100%"> <TBODY> <TR style="TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;"> <TD style="WIDTH: 8%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL A</TD> <TD style="WIDTH: 18%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL B</TD> <TD style="WIDTH: 22%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL C</TD> <TD style="WIDTH: 14%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL D</TD> <TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL E</TD> <TD style="WIDTH: 10%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL F</TD> <TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL G</TD> <TD style="WIDTH: 4%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</TD> </TR> </TBODY> </TABLE> </HTML>

Here is the daemon on jsFiddle

+6
source share
3 answers

add word-wrap: break-word to your cell style.

Although you really should avoid inline styles and declare a class for cells.

update:

jsfiddle

+10
source

Just for the sake of correctness, I updated the solution proposed by @redDevil to adhere to modern web standards :

Markup

 <table> <tbody> <tr> <td class="a">COL A</td> <td class="a">COL B</td> <td class="a">COL C</td> <td class="a">COL D</td> <td class="a">COL E</td> <td class="a">COL F</td> <td class="a">COL G</td> <td class="b">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</td> </tr> </tbody> </table>

Styles

 table { width: 100%; table-layout: fixed; } td { border: 1px solid #35f; overflow: hidden; text-overflow: ellipsis; } td.a { width: 13%; white-space: nowrap; } td.b { width: 9%; word-wrap: break-word; }

Live

Here's a demo on jsFiddle

Note:

  • Most of the solution sets table-layout: fixed; in the table element.
  • The other part - you know this - provides a long word-wrap: break-word; cell word-wrap: break-word; and removes the overflow: hidden; rules overflow: hidden; .
+7
source

I believe that you will need to display: the block element for overflow to work correctly.

The easiest way to do this, if you need to use tables, is to add inside each of your elements with a style on it.

I will post an example of what I'm talking about.

0
source

Source: https://habr.com/ru/post/910838/

More articles:


All Articles