JavaScript - Видимый текст DIV

Question

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

Обратите внимание, что я хочу, чтобы переполнение было удалено, поэтому свойство эллипсиса CSS не будет работать для меня. Поэтому в основном, я хочу, чтобы текст выше выглядел так:

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

Как это возможно с использованием чистого JavaScript?

EDIT

Мне нужна функция JavaScript, чтобы обрезать текст, потому что мне нужно, чтобы сосчитать символы видимого текста.

Answer 1

Хорошо, я не видел дополнения к вопросу. Хотя ранее я сказал, что это невозможно сделать с использованием JavaScript и шрифта, который не является фиксированной шириной ... на самом деле - это возможно!

Вы можете обернуть каждый отдельный символ в <span> и найти первый <span>, который находится за пределами родителя. Что-то вроде:

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

Бело-пространство: Nowrap; требуется, когда содержимое имеет пробелы.

В любом случае, длинные слова в отдельных строках не отображаются. http://jsfiddle.net/h6Bhb/

Answer 3

попробовать это, она требует фиксированной ширины, если это нормально с вами: 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

Вы пытаетесь заставить проблему CSS в JavaScript. Вытащите молоток и выньте отвертку. http://en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nail

Решение вопроса о персонаже, вероятно, не имеет значения, если вы сделаете шаг назад. Последний символ может быть только частично видимым, а число символов резко отличается от заданного размера шрифта, разницы в ширине между W и i и т. Д. Вероятно, ширина div важнее, чем количество символов в истинной проблеме.

Если вы все еще застряли в выяснении видимых символов, поместите прогиб внутри div вокруг текста, используйте css, предоставленный в других ответах на этот вопрос, а затем в JavaScript обрезайте один символ во время до тех пор, пока ширина диапазона не станет меньше ширины div. И затем наблюдайте, как ваш браузер зависает в течение нескольких секунд каждый раз, когда вы делаете это с большим абзацем.

Answer 5

Вы можете сделать это с помощью Javascript. Вот функция, которая подсчитывает количество видимых символов в элементе, независимо от внешних листов CSS и встроенных стилей, применяемых к элементу.Я проверил его только в Chrome, но я думаю, что это кросс-браузер дружественный:

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