文本溢出：省略號不工作的編輯DIV

我有很多TD的表，CSS是文本溢出：省略號不工作的編輯DIV

text-overflow: ellipsis; 
white-space: nowrap; 
overflow:hidden; 
max-width:84px; 
padding-left:10px;

一切工作正常，但我也對那些文本溢出一些TD可編輯的div ：省略號;無法正常工作。

他們是隱藏的，但沒有...的內容

編輯

這裏我的HTML我使用生成表

<table> 
    <tr> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Job Title</th> 
    <th>Company</th> 
    <th>Email</th> 
    </tr> 
    <tr> 
    <td>ABC</td> 
    <td>XYZ</td> 
    <td>Software Engineer</td> 
    <td><div contenteditable="true">ABC Corporation</div></td> 
    <td><div contenteditable="true">[email protected]</div></td> 
    </tr> 
</table>

來源

2013-06-06 Sandeep Garg

得到了一些標記，我們呢？ – Kyle

的元素嵌套的方式意味着你需要的樣式應用於td div以及td。這個CSS適用於您提供的HTML：

td div{ 
text-overflow: ellipsis; 
white-space: nowrap; 
overflow:hidden; 
max-width:84px; 
padding-left:10px; 
}

And here's a jsFiddle

來源

2013-06-06 10:32:42 FarmerGedden

我很欣賞你的努力，但是當我點擊可編輯div，它不顯示可編輯div的隱藏內容。如果我刪除了在div上應用的CSS，而不是顯示隱藏的內容，雖然它不顯示省略號 –

那麼，冒着聽起來很挑剔的風險，這在技術上是一個不同的問題 - 但我同意你應該能夠看到內容關注焦點。這樣做的最優雅的方式是使用輸入元素而不是可編輯的divs - [看到這個小提琴。]（http://jsfiddle.net/UgKrW/2/）這種方法也有由於'divs'在這裏可能充當輸入字段，所以語義上更有優勢。 – FarmerGedden

我把你的css和改進你的jsfiddle來得到正確的結果這裏是我的[jsfiddle]（http://jsfiddle.net/sandeepgarg/cmeWZ/） –

-1

添加display: block的風格。

text-overflow: ellipsis; 
white-space: nowrap; 
overflow:hidden; 
max-width:84px; 
padding-left:10px; 
display:block;

來源

2013-06-06 10:26:19

向td元素添加display：block不僅對省略號沒有影響，而且會導致不需要的格式化 - 請參閱小提琴[here]（http://jsfiddle.net/UgKrW/1/） –

文本溢出：省略號不工作的編輯DIV

回答

相關問題