溢出和省略號在此表中不起作用

FF v14有我正在尋找的外觀。 IE9不會隱藏溢出，也不會顯示省略號。我怎樣才能解決這個問題在IE9中工作？溢出和省略號在此表中不起作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
    <style type="text/css"> 
    .col 
    { 
     max-width:10em;overflow:hidden;text-overflow:ellipsis; 
    } 
    .row 
    { 

    } 
    .table 
    { 
     white-space: nowrap; 
    } 
    </style> 
</head> 
<body> 
<table class="table"> 
    <tr class="row"> 
     <td class="col">This is some text in row 1 column 1</td> 
     <td class="col">This is what it looks like in row 1 column 2</td> 
    </tr> 
    <tr class="row"> 
     <td class="col">here is row 2 column 2</td> 
    </tr> 
</table> 
</body> 
</html>

UPDATE
我注意到，在Visual Studio中的驗證錯誤：

Validation (CSS 2.1): 'text-overflow' is not a known CSS property name.

這是否意味着我需要以某種方式明確指定更高版本的CSS？如果是，如何？

Fiddle

來源

2012-08-06 P.Brian.Mackey

它會進入怪癖模式或兼容模式嗎？ – Ryan 2012-08-06 13:55:43

根據JS命令：'javascript：window.alert（'您在'+（document.compatMode ==='CSS1Compat'''Standards'：'Quirks'）+'模式。'） '我在IE中的標準模式。 – 2012-08-06 13:59:27

爲了確保，請改用F12開發人員工具。它會告訴你在右上角的標準和瀏覽器模式。 – Ryan 2012-08-06 14:02:45

，我想到的唯一解決辦法是包裹單元格的內容中的DIV：

 <td><div class="col">This is some text in row 1 column 1</div></td>

有點亂，但它似乎在IE，鉻，FF工作和Safari。

來源

2012-08-06 16:02:45 codewrite

這不適合我。如果您覺得我做了不正確的事情，請修改小提琴作爲證明。 – 2012-08-06 16:05:49

我收回它。我犯了一個html錯誤。這確實有用。 – 2012-08-06 16:07:14

+1不錯的修復。 '文本溢出：省略號; -ms-text-overflow：ellipsis; -o-text-overflow：ellipsis;' – iambriansreed 2012-08-06 17:13:04

溢出和省略號在此表中不起作用

回答

相關問題