Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS - Keep Table Cell from Expanding and Truncate Long Text

Tags:

html

css

Can someone please tell me why this is not truncating the text? the last cell just keeps growing. I don't want cells to grow beyond their allowed 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 a demo on jsFiddle

like image 597
Pepe Avatar asked Mar 15 '12 18:03

Pepe

People also ask

How do you stop a cell from expanding in a table?

To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.

How do you make a table with multiple lines on long text in CSS?

When the text in a single table cell exceeds a few words, a line break (<BR>) may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code <BR> within the text at the point(s) you want the line to break.

How do you wrap text in a table cell in HTML?

There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.

How do you change text overflow ellipsis in a table?

To make an ellipsis work on a table cell, you can use the CSS display property set to its "block" or "inline-block" value. In our example below, besides the display property, we set the text-overflow to "ellipsis", use the "nowrap" value of the white-space property, set the overflow to "hidden".

1 Answers

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

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

updated:

jsfiddle

like image 98
redDevil Avatar answered Sep 20 '22 23:09

redDevil
Sign in to Comment

Related questions

An element with more text pushes down other inline-block elements. Why?
Fixed position div not staying contained in wrapping div, overlays entire screen?
How to display HTML5 validation if inputElement.validity.valid == false?
CSS: Force textarea to ocuppy all available area
How can I hide elements in my list and add a 'show more' feature?
Disabling a Button in IE6, IE7, IE8?
Does a meta tag for "og:title" make redundant a meta tag for "title"?
How to make distance between dot and text in a unordered list smaller?
Cannot get body element from ajax response
Arabic text with custom fonts in iOS
How to modify the HTML of a text node (type 3) / how to wrap it in an HTML span
Apply Style only to input=text
How can we protect our image being copied from our web site
Would writing HTML with PHP's echo vs writing plain HTML cause any differences in performance?
How do I visually (or semantically) include an <ol> inside a <p>?
How to display a text (Html format) in a website (Asp.net C#)
Knockout JS: Change event not firing for HTML5 date on iPad
Positioning problems in Firefox? position:relative for a display:table element
DIVs inside another DIV inside another DIV with CSS
How to disable bouncing in html5 fullscreen iphone app?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!