Word截斷，然後應用使用css的省略號

.applyWordWrap{ 
    max-width: 8em; 
    word-wrap:break-word;  
}

（o.4em = 1個字符） 8em = 20個字符。Word截斷，然後應用使用css的省略號

我有一個60個字符的字符串。我想顯示20個字符的行，然後再包剩下的文本包含10個字符，然後下一行...（三聯點）

我想上面的代碼，但它不工作

我提到了不同的帖子，但他們沒有太大的幫助。

我怎樣才能實現這個使用CSS？

來源

2015-02-11 VelNaga

您可以得到的最接近的值是以ch爲單位設置最大寬度Take a look here。這接近它的最接近的近似值來獲得我們在CSS中的字符的寬度。

試試這個：

.applyWordWrap{ max-width: 20ch; word-wrap:break-word}

來源

2015-02-11 10:23:05 user2232273

ch單位等於字體中用於呈現它的「0」（ZERO，U + 0030）字形的高級度量，因此只有當字符串包含20個字符時，20個字符長度字符串的計算纔是正確的。 0「字符。 – 2015-02-11 10:34:27

@ user2232273我已經試過這個，但沒有運氣。 – VelNaga 2015-02-11 11:41:06

你的計算是正確的，如果只使用固定寬度字體。在TrueType字體中，字符寬度是可變的，所以字符串「www」比「iii」寬。這就是CSS處理實際字符串長度而不是字符數量的原因。

下面的示例說明它：

#ttf{ 
 
    font-size: 16px; 
 
} 
 
#fixed{ 
 
    font-family: Courier New, monospace; 
 
    font-size: 16px; 
 
}

<div id='ttf'>The text in 32 characters length</div> 
 
<div id='fixed'>The text in 32 characters length</div>

如果你想通過固定號碼，你應該使用JavaScript字符的約束字符串。

來源

2015-02-11 10:35:11

謝謝您的回覆。即使我不清楚我現在可以做什麼？我只使用普通英文字符而不是任何特殊類型的字體。 – VelNaga 2015-02-11 11:40:39

大多數Web字體都是TrueType。默認字體是TrueType。這意味着符號寬度是可變的，如果您使用英文字符和數字或任何其他符號則無關緊要。所以，字符串的寬度取決於其內容。剪輯字符串的最正確方法是使用標準運行。然後，您不知道有多少個字符可見，但您確定可見部分的寬度符合容器大小。你有一個很好的理由有固定數量的字母，我建議你使用像'monospace'這樣的固定大小的字體。 – 2015-02-11 11:57:07

Word截斷，然後應用使用css的省略號

回答

相關問題