CSS：截斷表單元格和中間內容

我有一個表格單元格中的內容。裏面的內容總是居中，在中間。但是當單元格比我想要截斷文本的內容小時。但它不起作用。細胞有一個固定的寬度和高度，但是當我截斷它時，細胞很大。有沒有人有想法？或者有可能使用jQuery？CSS：截斷表單元格和中間內容

HTML/CSS

<table> 
<tr> 
<td><a href=""> 
    <div class="ev orange"> 
     <div class="ev_text">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 &amp; M2</div> 
    </div> 
    </a> 
</td> 
</tr> 
</table> 

.ev { 
    color: #000; 
    cursor: pointer; 
    transition: box-shadow 0.1s linear; 
    /* line-height: 28px; */ 
    position: relative; 
    height: 51px; 
    display: table; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    font-size: 8px; 
    width: 20px; 
    height: 20px; 
} 
.ev_text { 
    color: #000; 
    cursor: pointer; 
    transition: box-shadow 0.1s linear; 
    line-height: 17px; 
    position: relative; 
    max-height: 51px; 
    min-height: 51px; 
    overflow: hidden; 
    line-height: normal; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

這裏是我的小提琴： http://jsfiddle.net/vnx0sb2L/1/

來源

2014-10-29 drno

您是否嘗試在您的.ev_text類中添加最大寬度？像[這]（http://jsfiddle.net/vnx0sb2L/4/） – Danield 2014-10-29 12:39:49

是的，但我想顯示多個文本行。 – drno 2014-10-29 13:12:33

編輯HTML結構和CSS。

<div class="ev_text"> 
    <p class="truncate">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 M2</p> 
</div> 

// css 
.truncate{ 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    max-width: 51px; 
    max-height: 51px; 
}

這個問題的原因是你已經做了一個DIV爲顯示：表細胞，其中省略號可與塊級元素。

您可以從.ev_text類中刪除覆蓋屬性。

來源

2014-10-29 12:42:27

幾乎完美，但現在我只看到一行中的第一個單詞。難道看不到多行？我認爲白色空間是個問題。 http://jsfiddle.net/vnx0sb2L/10/ – drno 2014-10-29 13:09:40

測試是這樣的：

<style> 
    .ev { 
    color: #000; 
    cursor: pointer; 
    transition: box-shadow 0.1s linear; 
    /* line-height: 28px; */ 
    position: relative; 
    height: 51px; 
    /*display: table;*/ 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    font-size: 8px; 
    width: 20px; 
    height: 20px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.ev_text { 
    color: #000; 
    cursor: pointer; 
    transition: box-shadow 0.1s linear; 
    line-height: 17px; 
    position: relative; 
    max-height: 51px; 
    min-height: 51px; 
    overflow: hidden; 
    line-height: normal; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 

} 
</style> 

<table> 
<tr> 
<td style='max-width:12px;height:auto;'> 
    <div class="ev orange"> 
     <div class="ev_text">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 &amp; M2BLALALLALALALLALALLALALALA</div> 
    </div> 
</td> 
</tr> 
</table>

文本溢出必須在.ev沒有在.ev_text

編輯：

同樣在CSS顯示錶如下除去

來源

2014-10-29 12:41:32 Buisson

CSS：截斷表單元格和中間內容

回答

相關問題