文本溢出可變大小

我一直在尋找實現以下設計的HTML/CSS。 http://i.imgur.com/LwKAZ.jpg 我有在列中的文本溢出問題。目前表格列的寬度是以百分比格式給出的，因此列寬將根據屏幕大小而變化。但是也有一個最小寬度。在第一個文本列中，您可以看到內容正在擴展，並且由於尺寸較大而生成了第二行。如何使用文本溢出來避免這個問題？或者其他解決方案？此外，當鼠標懸停發生時，您可以看到一組圖標出現在同一行中。此時，圖標下面的文本應該隱藏，並且應該縮短設計中顯示的內容。你能否建議我解決這個問題？我試過text-overflow: ellipsis。但是當屏幕寬度發生變化時，我遇到了問題。由於可變列寬沒有最小寬度，因此如何縮短此字段中的文本？另外在懸停的情況下??文本溢出可變大小

請讓我知道，如果你想知道的一切。

來源

2012-09-15 99tharun

如果不希望文本在多行分割，加white-space:nowrap規則。然後，爲單元格設置一個max-width。

對於圖標，position他們在absolute右側，z-index高於文本。您還必須將relative位置添加到包含的單元格中。爲了讓它們在文本上可見，我添加了一個背景顏色（和一些左邊的填充）。

編輯：修正了Mozilla的

的Mozilla似乎忽略position:relative;的td元素。要修復它，你來包裝另一個DIV中的TD的內容，並運用這種風格

.tables td { 
    font-weight: 400; 
    font-size: 13px; 
    border-bottom: 1px solid #E1E1E1; 
    line-height: 38px; 
    text-align: right; 
    white-space: nowrap; 
    max-width: 200px; /* just an example */ 
} 

.tables td > div { 
    overflow: hidden; 
    width:100%; 
    position: relative; 
} 

.linkFunctions { 
    display: none; 
    padding-top: 14px; 
    position: absolute; 
    right: 0; 
    z-index: 999; 
    background-color: #FFF9DC; 
    padding-left: 3px; 
    width: 100%; 
    max-width: 120px; /* just an example */ 
    text-overflow: ellipsis; 
    overflow: hidden; 
}

來源

2012-09-15 10:26:35 Giona

感謝GionaF！這很好用！ :) – 99tharun

如果我們需要添加三個不要（...），只要我們縮短文本？ – 99tharun

將此添加到。linkFunctions'width：100％; max-width：120px; text-overflow：ellipsis; 溢出：隱藏;' – Giona

這不正是你想要的（關於省略號），但非常接近。

對於<td>內<a>添加

td a{ 
    display:block; 
    overflow:hidden; 
    width:100%; 
    white-space:nowrap; 
}

（您可能需要一個類添加到他們更容易瞄準他們，而不是所有<a>內<td> S）。

和關於懸停。向右浮動div.linkFunctions，爲其添加黃色背景，並且看起來像是相應地剪切文本。

來源

2012-09-15 10:25:18

所有這些都需要一個寬度來設置，不使表流體，因爲他們的目的是是。使用此：http://jsfiddle.net/maruxa1j/

這可以自動設置<td>寬度爲百分比和:after自動調整大小的溢出<span>

來源

2015-05-21 00:27:18

文本溢出可變大小

回答

相關問題