JavaScript - Văn bản có thể nhìn thấy của DIV

Question

---------------------------------------------------- 
| This is my text inside a div and I want the overf|low of the text to be cut 
---------------------------------------------------- 

Xin lưu ý rằng tôi muốn xóa tràn, do đó thuộc tính CSS ellipsis sẽ không hoạt động đối với tôi. Vì vậy, về cơ bản, tôi muốn rằng văn bản ở trên xuất hiện như thế này:

---------------------------------------------------- 
| This is my text inside a div and I want the overf| 
---------------------------------------------------- 

Làm thế nào điều này có thể với JavaScript thuần túy?

EDIT

Tôi cần một hàm JavaScript để cắt văn bản bởi vì tôi cần phải đếm số ký tự của văn bản rõ ràng.

Answer 1

OK, tôi không thấy phụ lục cho câu hỏi. Mặc dù trước đây tôi đã nói rằng không thể thực hiện điều này bằng JavaScript và phông chữ không cố định chiều rộng ... nó thực sự là là có thể!

Bạn có thể bao bọc từng ký tự riêng lẻ trong một <span> và tìm số <span> đầu tiên nằm ngoài giới hạn của phụ huynh. Một cái gì đó như:

function countVisibleCharacters(element) { 
    var text = element.firstChild.nodeValue; 
    var r = 0; 

    element.removeChild(element.firstChild); 

    for(var i = 0; i < text.length; i++) { 
     var newNode = document.createElement('span'); 
     newNode.appendChild(document.createTextNode(text.charAt(i))); 
     element.appendChild(newNode); 

     if(newNode.offsetLeft < element.offsetWidth) { 
      r++; 
     } 
    } 

    return r; 
} 

Here's a demo.

Answer 2

.col { width:40px; overflow: hidden; white-space:nowrap; }

Không gian trắng: nowrap; là cần thiết khi nội dung có không gian.

Dù bằng cách nào, các từ dài trong các dòng đơn sẽ không xuất hiện. http://jsfiddle.net/h6Bhb/

Answer 3

thử này, nó đòi hỏi một chiều rộng cố định nếu đó là ok với bạn: http://jsfiddle.net/trpeters1/qvZKw/20/

HTML:

<div class="col">This is my text inside a div and I want the overf|low of the text to be cut</div> 

CSS:

.col { 
    width:120px; 
    overflow: hidden; 
    white-space:nowrap; 

}​ 

Answer 4

Bạn đang cố gắng ép buộc một vấn đề về CSS thành JavaScript. Đặt búa đi và lấy ra một tuốc nơ vít. http://en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nail

Giải quyết câu trả lời về số ký tự có thể không liên quan nếu bạn lùi lại một bước. Ký tự cuối cùng có thể chỉ hiển thị một phần, và số ký tự là khác nhau đáng kể cho các thay đổi kích thước phông chữ, sự khác biệt về chiều rộng giữa W a i, v.v. Có lẽ chiều rộng của div quan trọng hơn số ký tự trong vấn đề thực.

Nếu bạn vẫn bị kẹt khi tìm ra các ký tự hiển thị, hãy đặt khoảng cách bên trong div xung quanh văn bản, sử dụng css được cung cấp trong các câu trả lời khác cho câu hỏi này, và sau đó trong JavaScript cắt một ký tự tại một thời điểm chuỗi cho đến khi chiều rộng của span nhỏ hơn chiều rộng của div. Và sau đó xem như trình duyệt của bạn bị đóng băng trong một vài giây mỗi khi bạn làm điều đó với một đoạn lớn.

Answer 5

Bạn có thể làm điều này với Javascript. Đây là một hàm đếm số ký tự hiển thị trong một phần tử, bất kể các trang css bên ngoài và kiểu nội tuyến được áp dụng cho phần tử đó.Tôi đã chỉ được thử nghiệm nó trong Chrome, nhưng tôi nghĩ rằng đó là trình duyệt chéo thân thiện:

function count_visible(el){ 
    var padding, em, numc; 
    var text = el.firstChild.data; 
    var max = el.clientWidth; 

    var tmp = document.createElement('span'); 
    var node = document.createTextNode(); 
    tmp.appendChild(node); 
    document.body.appendChild(tmp); 

    if(getComputedStyle) 
     tmp.style.cssText = getComputedStyle(el, null).cssText; 
    else if(el.currentStyle) 
     tmp.style.cssText = el.currentStyle.cssText; 

    tmp.style.position = 'absolute'; 
    tmp.style.overflow = 'visible'; 
    tmp.style.width = 'auto'; 

    // Estimate number of characters that can fit. 
    padding = tmp.style.padding; 
    tmp.style.padding = '0'; 
    tmp.innerHTML = 'M'; 
    el.parentNode.appendChild(tmp); 
    em = tmp.clientWidth; 
    tmp.style.padding = padding;  
    numc = Math.floor(max/em); 

    var width = tmp.clientWidth; 

    // Only one of the following loops will iterate more than one time 
    // Depending on if we overestimated or underestimated. 

    // Add characters until we reach overflow width 
    while(width < max && numc <= text.length){ 
     node.nodeValue = text.substring(0, ++numc); 
     width = tmp.clientWidth; 
    } 

    // Remove characters until we no longer have overflow 
    while(width > max && numc){ 
     node.nodeValue = text.substring(0, --numc); 
     width = tmp.clientWidth; 
    } 

    // Remove temporary div 
    document.body.removeChild(tmp); 

    return numc; 
} 

JSFiddle Example