將html TD寬度設置爲字符數

我想將TD寬度設置爲字符數，例如，如果設置爲11，則只需顯示11個字符，其餘行必須位於新行中。我嘗試寬度屬性，但它在不同的瀏覽器/分辨率中顯示不同。將html TD寬度設置爲字符數

<table border="1"> 
    <tr> 
<td>test1</td> 
<td>CRTAX_G</td> 
    <td> 
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013 
    </td> 
    </tr> 
<tr> 
<td>test1</td> 
<td>CRTAX_G</td> 
    <td> 
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013 
    </td> 
    </tr> 
<tr> 
<td>test1</td> 
<td>CRTAX_G</td> 
    <td> 
    28-FEB-2013, 04-MAR-2013, 05-MAR-2013, 07-MAR-2013, 11-MAR-2013, 13-MAR-2013, 12-MAR-2013, 08-MAR-2013, 06-MAR-2013 
    </td> 
    </tr> 
<tr> 
<td>test1</td> 
<td>CRTAX_G</td> 
    <td> 
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013 
    </td> 
    </tr> 
<tr> 
<td>test1</td> 
<td>CRTAX_G</td> 
    <td> 
    28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013, 13-MAR-2013, 11-MAR-2013, 07-MAR-2013, 05-MAR-2013, 01-MAR-2013 
    </td> 
    </tr> 
    <table>

該顯示錶的日期在一個單一的線，

28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013,

我希望它顯示爲

28-FEB-2013, 
    11-MAR-2013, 
    13-MAR-2013,

每個日期必須在一個新的生產線。

來源

2013-03-14 NEO

TD的內容看起來像是我的日期列表。爲什麼不宣佈OL或UL並設計這些項目？這樣，你不必把它當作非結構化文本，但是你創建了它的結構和樣式。 – Kwebble 2013-03-14 08:32:03

我能想象的最簡單的解決方法是：

table tr td+td+td { 
    font-size: 100%; 
    font-family: monospace; 
    width: 8em; 
}

http://jsbin.com/elaleg/1/edit

來源

2013-03-14 08:31:41 Saram

它的工作原理。反正有沒有使用等寬字體並得到相同的結果？ – NEO 2013-03-14 08:50:27

我使用等寬字體是強制性的 - 如果你想不做改變內容。 – Saram 2013-03-14 08:54:56

看起來em是字符的高度，而不是寬度。您應該使用ch代替。在這裏查看第二個答案：http://stackoverflow.com/questions/8186457/specify-width-in-characters – 2015-10-07 14:31:24

<html> 
<body> 
    <table border="1"> 
    <tr> 
     <td style="width:103px;word-wrap:break-word;">28-FEB-2013, 11-MAR-2013, 13-MAR-2013</td> 
    </tr> 
</table> 
</body> 
</html>

試試這個，我希望你會得到解決

來源

2013-03-14 08:27:19

您可以在包裝標籤或任何其他與下面的樣式文本：

display: inline-block; width: 11em;

檢查JsFiddle

來源

2013-03-14 08:27:36 Sergio

你可以check this

或者試試css風格white-spac Ë有效

white-space: nowrap;

來源

2013-03-14 08:27:44 Sandy

這裏是一個解決方案，它爲我工作。假設td具有指定的類名稱（稱爲payerName），並且該表具有一個id（稱爲可排序）。

$(".payerName").css({"white-space":"nowrap"}); 
$(".payerName").css({"overflow":"hidden"}); 
$(".payerName").css({"text-overflow":"ellipsis"}); 
$("#sortable").css("table-layout","fixed");

這是一組步驟，您可以使用這些步驟避免長字符串進入td。省略號屬性將在字符串/值的末尾添加'...'。您可以添加title屬性，以便在鼠標懸停時顯示實際值。

希望這會有所幫助！

來源

2016-08-04 11:23:09 RishikeshD

將html TD寬度設置爲字符數

回答

相關問題