Thay thế các chuỗi quá dài bằng "..."

Question

Cho phép nói rằng chúng tôi có một số <div style="width:100px;">This text is too long to fit</div>

Văn bản trong div là động. Và tôi muốn ép buộc văn bản vừa với chiều rộng và không bị vỡ. Vì vậy, tôi cần một số loại chức năng để kiểm tra xem văn bản có phù hợp không và nếu không, thì tôi muốn hiển thị phần văn bản sẽ thực sự phù hợp. Và thêm ... vào cuối.

Kết quả cho một văn bản quá dài nên một cái gì đó như thế này: "This text is..."

Có một số cách tiêu chuẩn làm những gì tôi muốn? Hoặc bằng javascript, jquery, jsp hoặc java?

Cảm ơn!

Chỉnh sửa: Cảm ơn bạn đã trả lời nhanh chóng và nhiều câu trả lời! Tôi đã làm điều này trong java bằng cách đoán có bao nhiêu ký tự sẽ phù hợp. Nó có vẻ giống như một giải pháp ít hơn tối ưu, vì vậy đó là lý do tại sao tôi đến đây.

Giải pháp css hoàn hảo cho tôi. Nó không phải là lớn của một thỏa thuận mà nó không hoạt động cho firefox, kể từ khi khách hàng của tôi tất cả sử dụng tức là anyway. :)

Answer 1

bạn có thể làm điều đó với css3 sử dụng text-overflow:ellipsishttp://www.css3.com/css-text-overflow/

hoặc nếu bạn nhấn mạnh vào việc sử dụng cách js, bạn có thể quấn text-nút bên div của bạn và sau đó so sánh chiều rộng của bọc với với của phụ huynh.

Answer 2

if(text.length > number_of_characters) { 
    text = text.substring(from, to); 
} 

Answer 3

text-overflow: ellipis

div { 
    text-overflow: ellipsis 
} 

sẽ được hỗ trợ trong FireFox 7 http://caniuse.com/#search=text-overflow

Answer 4

Nếu bạn thêm một thẻ id để div, bạn có thể sử dụng document.getElementById("divid").innerHTML để có được nội dung của div. Từ đó, bạn có thể sử dụng .length để lấy độ dài của chuỗi. Nếu độ dài của chuỗi vượt quá một ngưỡng nhất định, chỉ cần lấy một chuỗi con và nối thêm "...".

Bạn nên cố gắng thực hiện phía máy chủ này nếu có thể. Dựa vào Javascript/CSS để định dạng chính xác cho người dùng là giải pháp ít lý tưởng.

Answer 5

Thử thuộc tính CSS text-overflow.

Answer 6

nếu bạn muốn xử lý dữ liệu, bạn có thể sử dụng một chức năng:

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)); 

EDIT: xử lý tất cả div với chiều dài dư thừa trong văn bản:

var maxlengthwanted=20; 

    $('div').each(function(){ 
     if ($('div').text().length > maxlengthwanted) 
      $(this).text(TextAbstract($(this).text())); 
    }); 

Answer 7

Một tình huống nhiều khả năng là bạn không thể biết có bao nhiêu nhân vật sẽ phù hợp với yếu tố dom, vì nó có phông chữ riêng và vân vân. CSS3 hiện không phải là một tùy chọn (cho tôi anyway).Vì vậy, tôi tạo ra một chút div offscreen và giữ gây nhiễu chuỗi thử nghiệm vào nó cho đến khi chiều rộng là đúng:

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); 

Answer 8

Cách dễ nhất để rút ngắn các biến sử dụng JavaScript:

function truncate(string, length){ 
    if (string.length > length) 
     return string.substring(0,length)+'...'; 
    else 
     return string; 
}; 

Lấy cảm hứng từ câu trả lời này: I want to truncate a text or line with ellipsis using JavaScript