在IE8和IE9中，表格单元的文本溢出省略号不起作用。

This code works in every browser just fine, of course except IE8 and IE9. Unfortunately those specific users are not allowed to use any other browsers in their environment. Googled for 3 hours, tried all possible CSS solutions, but it wont work. Please advice.

这段代码在每个浏览器中都很正常，当然除了IE8和IE9。不幸的是，这些特定的用户不允许在他们的环境中使用任何其他浏览器。用谷歌搜索了3个小时，尝试了所有可能的CSS解决方案，但行不通。请建议。

table-layout: fixed is not going to work, because table cells need to have specific width.

表格布局:固定不会起作用，因为表格单元格需要有特定的宽度。

http://jsfiddle.net/s7va8mLc/1/

http://jsfiddle.net/s7va8mLc/1/embedded/result/ (for IE8 view)

http://jsfiddle.net/s7va8mLc/1/embedded/result/(IE8视图)

HTML:

<table>
    <tr>
        <th>Test</th>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
    </tr>
</table>

CSS:

table {
    width: 500px;
    border: 1px dotted blue;
}

th {
    width: 250px;
}

td {
    width: 250px;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dotted red;
}

Expected result:

预期结果:

在IE8和IE9中，表格单元的文本溢出省略号不起作用。

IE8-9 result:

IE8-9结果:

在IE8和IE9中，表格单元的文本溢出省略号不起作用。

4 个解决方案

#1

Try this, hope it helps (tested in IE8 natively).

试试这个，希望它能帮助(在IE8上测试)。

http://jsfiddle.net/s7va8mLc/7/

http://jsfiddle.net/s7va8mLc/7/embedded/result/

HTML

<table>
 <tr>
    <th>Test</th>
    <td>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    </td>
 </tr>
</table>

CSS

table {
    width: 500px;
    border: 1px dotted blue;
}
th {
    width: 250px;
}
td, span {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    display: block;
    border: 1px dotted red;
}

#2

For getting internet explorer's compatibility you need type tag at the top like that :

为了获得ie的兼容性，你需要在顶部打上标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now run this again, I hope it will solve your issue.

现在再运行一次，我希望它能解决你的问题。

#3

In your td put a tag like p, span, label and fix its width some less than div width. Then it will work.

在您的td中放置一个标签，如p, span，标签和固定它的宽度小于div宽度。然后它会工作。

#4

just use td width property to 50% instead of tag it will work on all the browsers i believe.

只需将td宽度属性改为50%，而不是标签，它将在所有我认为的浏览器上运行。

check this fiddle

检查这个小提琴

<table>
    <tr>
        <td  class="text-center" width="50%">Test</td>      
        <td width="50%">
            Lorem ipsum dolor sit amet, ...
        </td>
    </tr>
</table>

.text-center{  
    text-align:center;
    font-weight:bold;
}

#1

Try this, hope it helps (tested in IE8 natively).

试试这个，希望它能帮助(在IE8上测试)。

http://jsfiddle.net/s7va8mLc/7/

http://jsfiddle.net/s7va8mLc/7/embedded/result/

HTML

<table>
 <tr>
    <th>Test</th>
    <td>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    </td>
 </tr>
</table>

CSS

table {
    width: 500px;
    border: 1px dotted blue;
}
th {
    width: 250px;
}
td, span {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    display: block;
    border: 1px dotted red;
}

#2

For getting internet explorer's compatibility you need type tag at the top like that :

为了获得ie的兼容性，你需要在顶部打上标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now run this again, I hope it will solve your issue.

现在再运行一次，我希望它能解决你的问题。

#3

In your td put a tag like p, span, label and fix its width some less than div width. Then it will work.

在您的td中放置一个标签，如p, span，标签和固定它的宽度小于div宽度。然后它会工作。

#4

just use td width property to 50% instead of tag it will work on all the browsers i believe.

只需将td宽度属性改为50%，而不是标签，它将在所有我认为的浏览器上运行。

check this fiddle

检查这个小提琴

<table>
    <tr>
        <td  class="text-center" width="50%">Test</td>      
        <td width="50%">
            Lorem ipsum dolor sit amet, ...
        </td>
    </tr>
</table>

.text-center{  
    text-align:center;
    font-weight:bold;
}

秒客网

在IE8和IE9中，表格单元的文本溢出省略号不起作用。

4 个解决方案

#1

#2

#3

#4

#1

#2

#3

#4

相关文章