如何使一個跨度在td內重疊文本？

Question

下面是當用戶將鼠標懸停在long text跨度鼠標，跨度被擴展並的td的大小改變的示例http://jsfiddle.net/9nvGM/

。我想阻止這種變化。無論內跨度多長，我都希望td具有相同的尺寸。可能嗎？

Answer 1

儘管可以使td的寬度變大，但這隻給出了有限的選項S作爲遠作爲標籤的長度去，另一個更安全的解決方案是絕對相對於現有的跨跨度位置，在這裏可以看到：http://jsfiddle.net/9nvGM/6/

HTML：

<span class="label"><span class="long label">long long long text</span>long text</span> 

CSS：

.label{ 
    position:relative; 
} 
.long{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    display:none; 
} 

JS：

handlerIn = function(e) { 
    span.find(".long").show(); 
} 
handlerOut = function(e) { 
    span.find(".long").hide(); 
} 

Answer 2

將td設置爲具有相對位置，並將該範圍設置爲absolutley，然後設置範圍的位置以及可能的寬度。跨度也需要顯示爲塊。這應該導致跨度保持在原來的位置，並且它會以任何方式重疊。跨度應該像工具提示一樣。

Answer 3

試試這個：

基本思路是固定寬度無論是TD還是跨度

span 
{ 
    width:50px; 
    overflow-x:scroll; /* or hidden */ 
} 

Answer 4

只需添加這個CSS規則

td { 
    max-width: 87px; 
} 

試試吧here

Answer 5

嘗試使用最小寬度和最大寬度爲您的TD，那麼你有你想要的

CSS

.tds{ 
max-width: 60px;min-width: 60px; 
} 

See Demo

Answer 6

存在.lable類NOWRAP風格。
只需將空白設置爲正常即可將其刪除。

.label{ 
    width:55px; 
    word-wrap:break-word; 
    white-space: normal !important; 
} 

這樣的：
http://jsfiddle.net/9nvGM/17/