text-overflow not working with HTML5 [duplicate]

Question

The following code works as desired on chrome. But not on firefox or IE. Adding <!DOCTYPE html> tag to this code, leads it not working on chrome too. Has text-overflow been deprecated or something? How can I make it compatible with all browsers and HTML5?

<head>

<style type='text/css'>
table {
    display: block;
    margin: 30px 0 auto 0;
    width: 100%;
    max-width: 1300px;
    text-align: left;
    white-space: nowrap;
    border-collapse: collapse;
    z-index: -1;
    table-layout:fixed;
}

td {
    overflow: hidden;
    white-space: nowrap;
    word-wrap:break-word;
    text-overflow:ellipsis;
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
    <tr>
        <th style="width: 18%;">Col 1</th>
        <th style="width: 12%;">Col 2</th>
        <th style="width: 13%;">Col 3</th>
        <th style="width: 7%">Col 4</th>
        <th style="width: 7%">Col 5</th>
        <th style="width: 6%">Col 6</th>
        <th style="width: 5%">Col 7</th>
        <th style="width: 13%">Col 8</th>
        <th style="width: 16%">Col 9</th>
        <th style="width: 3%">Col 10</th>
    </tr>
    <tr>
        <td>Some</td>
        <td>Data</td>
        <td>Stuff</td>
        <td>foo</td>
        <td>bar</td>
        <td>etc</td>
        <td>whatever</td>
        <td>stuff</td>
        <td>Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td>Yes</td>
    </tr>
</table>

</body>

This is what I want. enter image description here

it is supported by all browsers...you can check it here : w3schools.com/cssref/css3_pr_text-overflow.asp — user123_456
– user123_456, Commented May 14, 2013 at 7:22

LiuLang · Accepted Answer · 2013-05-15 03:26:26Z

1

You have misused the text-overflow property.

If you want to wrap text of an element, you have to specify the width or max-width of that element so that browsers know how to wrap the text content.

[EDITED] This is example code:

<head>

<style type='text/css'>
table {
    display: block;
    margin: 30px 0 auto 0;
    /*width: 100%;*/
    max-width: 900px;
    text-align: left;
    white-space: nowrap;
    border-collapse: collapse;
    z-index: -1;
    table-layout:fixed;
}

td {
    overflow: hidden;
    white-space: nowrap;
    word-wrap:break-word;
    text-overflow: ellipsis;
    border: 1px solid black;
}

.col1 {
  width: 80px;
}
.col7 {
  max-width: 300px;
}
.col8 {
  max-width: 300px;
}
</style>
</head>
<body>
<table>
    <tr>
        <th class="col1">Col 1</th>
        <th class="col2">Col 2</th>
        <th class="col3">Col 3</th>
        <th class="col4">Col 4</th>
        <th class="col5">Col 5</th>
        <th class="col6">Col 6</th>
        <th class="col7">Col 7</th>
        <th class="col8">Col 8</th>
        <th class="col9">Col 9</th>
        <th class="col10">Col 10</th>
    </tr>
    <tr>
        <td class="col1">Some</td>
        <td class="col2">Data</td>
        <td class="col3">Stuff</td>
        <td class="col4">foo</td>
        <td class="col5">etc</td>
        <td class="col6">whatever</td>
        <td class="col7">stuff</td>
        <td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td class="col9">Yes</td>
        <td class="col10">bar</td>
    </tr>
    <tr>
        <td class="col1">Some</td>
        <td class="col2">Data</td>
        <td class="col3">Stuff</td>
        <td class="col4">foo</td>
        <td class="col5">etc</td>
        <td class="col6">whatever</td>
        <td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td class="col7">stuff</td>
        <td class="col9">Yes</td>
        <td class="col10">bar</td>
    </tr>
</table>

</body>

Here is demo screenshot: enter image description here

edited May 15, 2013 at 3:26

answered May 14, 2013 at 7:44

LiuLang

7834 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Optimus Prime Over a year ago

but if I want to set max-width of all columns differently?

LiuLang Over a year ago

Use classes. Like this: .col1 { max-width: 16%;} col2 { max-width: 20%;} ... And td/th in same columns should have the same class name.

ChamingaD · Accepted Answer · 2013-05-14 07:35:16Z

1

Add max-width to your td.

td{
    overflow: hidden;
    white-space: nowrap;
    word-wrap:break-word;
    text-overflow:ellipsis;
    border: 1px solid black;
    max-width: 50px;
}

answered May 14, 2013 at 7:35

ChamingaD

2,93810 gold badges37 silver badges58 bronze badges

Comments

qwerty · Accepted Answer · 2013-05-14 08:16:21Z

0

text-overflow: ellipsis works fine in HTML5. I think display: block is creating some problem. Try removing it or replace it with display: table and check if it works.

answered May 14, 2013 at 8:16

qwerty

2,5123 gold badges35 silver badges58 bronze badges

Collectives™ on Stack Overflow

text-overflow not working with HTML5 [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related