假設我們有一個<div style="width:100px;">This text is too long to fit</div>用「...」代替太長的字符串
div中的文本是動態的。我想強制文本寬度適合，而不是打破。 所以我需要某種功能來測試文本是否適合，如果不適合，那麼我想顯示實際適合的文本部分。最後追加...。
結果了太長時間的文字應該是這樣的："This text is..."
是否有這樣做我想要的一些標準的方式嗎？通過javascript，jquery，jsp或java？
謝謝！
編輯： 感謝您的快速和許多答案！我通過猜測有多少個字符適合用java來做這件事。這似乎不是一個最佳的解決方案，所以我纔來到這裏。
css解決方案對我來說非常完美。它沒有那麼大的一個交易，它不適用於Firefox，因爲我的客戶都使用即無論如何。 :)
，你可以用text-overflow:ellipsishttp://www.css3.com/css-text-overflow/
，或者如果你堅持使用JS的方式，你可以用你的DIV中的文本節點，然後用與比較包裹的寬度CSS3做的父母。
+1！整潔的解決方案 – GETah
div {
text-overflow: ellipsis
}
於Firefox 7 http://caniuse.com/#search=text-overflow
如果添加id標籤到div支持，你可以用document.getElementById("divid").innerHTML得到div的內容。從那裏，你可以使用.length來獲得字符串的長度。如果字符串的長度超過了某個閾值，只需要一個子字符串並附加一個「...」。
但是，如果可以的話，你應該嘗試做這個服務器端。依靠Javascript/CSS爲用戶正確格式化是一個不太理想的解決方案。
試試CSS text-overflow屬性。
，如果你要處理的數據，你可以使用一個函數：
function TextAbstract(text, length) {
if (text == null) {
return "";
}
if (text.length <= length) {
return text;
}
text = text.substring(0, length);
last = text.lastIndexOf(" ");
text = text.substring(0, last);
return text + "...";
}
text = "I am not the shortest string of a short lenth with all these cows in here cows cows cows cows";
alert(TextAbstract(text,20));
編輯：過程中的所有分度，多餘長度的文本：
var maxlengthwanted=20;
$('div').each(function(){
if ($('div').text().length > maxlengthwanted)
$(this).text(TextAbstract($(this).text()));
});
更可能的情況是，你因爲它有自己的字體等等，所以不可能知道將有多少個字符適合dom元素。 CSS3目前不是一個選項（無論如何）。所以，我創建了一個小格屏幕外，並保持干擾測試串入，直到寬度是正確的：
var text = 'Try to fit this text into 100 pixels!';
var max_width = 100;
var test = document.createElement('div');
test.className = 'Same Class as your real element'; // give it the same font, etc as a normal button
test.style.width = 'auto';
test.style.position = 'absolute';
test.style.left = '-2000px';
document.body.appendChild(test);
test.innerHTML = text;
if ($(test).width() > max_width) {
for (var i=text.length; i >= 0; i--) {
test.innerHTML = text.substring(0, i) + '...';
if ($(test).width() <= max_width) {
text = text.substring(0, i) + '...';
break;
}
}
}
document.body.removeChild(test);
最簡單的方法的JavaScript：
function truncate(string, length){
if (string.length > length)
return string.substring(0,length)+'...';
else
return string;
};
通過這個答案的啓發：I want to truncate a text or line with ellipsis using JavaScript
你甚至可以使用CSS http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet – sod