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

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

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

<code>----------------------------------------------------
| This is my text inside a div and I want the overf|
----------------------------------------------------
</code>

Как это возможно с чистым JavaScript?

РЕДАКТИРОВАТ

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

 Jirka Kopřiva05 мая 2012 г., 20:43
тогда ты никогда не узнаешь, сколько букв умещается
 Jirka Kopřiva05 мая 2012 г., 20:41
Вы можете установить абсолютную ширину контейнера, но есть относительная ширина букв. Или у вас есть семейство шрифтов с фиксированной шириной?
 Savas Vedova05 мая 2012 г., 20:42
К сожалению, это не монопространство.
 Savas Vedova31 июл. 2017 г., 10:37
@ ajax333221 и он так и не вернулся ...

Ответы на вопрос(5)

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

Пробел: сейчас; требуется, когда в содержании есть пробелы.

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

 Tina CG Hoehr05 мая 2012 г., 20:38
Теперь я понимаю, что это работает только с одним длинным словом. Это то, для чего я его использовал.
 Ry-♦05 мая 2012 г., 20:36
 Savas Vedova05 мая 2012 г., 20:36
Спасибо за ответ. Однако это не то, что я ищу. Мне нужна функция JavaScript, чтобы обрезать текст, потому что мне нужно посчитать символы видимого текста.
 tim peterson05 мая 2012 г., 20:37
yes, это только размер div, посмотри: Jsfiddle.net / trpeters1 / qvZKw / 16
Решение Вопроса

я не видел дополнение к вопросу. Хотя ранее я говорил, что это невозможно сделать с помощью 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;
}

Вот демо.

 Savas Vedova05 мая 2012 г., 20:40
Снова, это не то, что я ищу. Спасибо, в любом случае
 Jirka Kopřiva05 мая 2012 г., 20:40
но нельзя посчитать видимые символы
 Ry-♦05 мая 2012 г., 20:44
@ timpeterson: см. демонстрацию. Как правило, я не включаю специфичные для приложения метрики в общие ответы:)
 Ry-♦05 мая 2012 г., 20:40
@ SavasVedova: О, хорошо, только что заметил ваш вопрос редактировать. Это невозможно, если вы не используете шрифт фиксированной ширины.
 tim peterson05 мая 2012 г., 20:43
устанавливает divwidth хорошо? если так, просто добавьте это к#myDiv

которая подсчитывает количество видимых символов в элементе, независимо от внешних листов 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 Пример

 Delta25 июл. 2012 г., 00:55
это работает не во всех случаях
 Paulpro05 мая 2012 г., 21:34
Чтобы проверить это, попробуйте изменить ширину в css, пока следующий символ не станет полностью видимым (должен быть 304px, если JSFiddle нормализует CSS идеально).
 Paulpro25 июл. 2012 г., 02:14
@ Delta Можете ли вы привести пример, чтобы я мог его улучшить?

и отвертку.http: //en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nai

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

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

 tim peterson05 мая 2012 г., 21:35
@ robich, какой правильный инструмент, учитывая, что им «нужно посчитать символы видимого текста»? Я полностью честен, возможно, я запутался и не знаю, о чем вы говорите.
 tim peterson05 мая 2012 г., 20:47
@ robich, спасибо за предоставление большего контекста
 tim peterson05 мая 2012 г., 21:17
@ robic, просто к вашему сведению, спрашивающий отредактировал свой вопрос, похоже, им нужно решение JS.
 robrich05 мая 2012 г., 21:20
@ timpeterson: да, но это все еще не тот инструмент для работы.
 robrich05 мая 2012 г., 21:54
@ timpeterson Мое предложение состоит в том, что предпосылка «нужно считать персонажей» ошибочна. Вероятно, настоящая проблема заключается в том, чтобы «выбрать подходящую ширину div» или «избегать загрузки слишком большого объема данных на странице, если она не будет отображаться», или «у css-trim-техники есть визуально непривлекательный правый столбец, если в моем контенте есть длинные слова ». Если это просто «обрезать чрезмерно широкие столбцы», то используйте CSS.

он требует фиксированной ширины, если это нормально с тобой:http: //jsfiddle.net/timrpeterson/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;

 }​
 tim peterson19 февр. 2019 г., 17:26
@ clami219 jsfiddle должен быть исправлен.
 clami21918 февр. 2019 г., 17:56
Ссылка на jsfiddle больше не работает. Непонятно, был ли в ответе какой-либо js или просто html + css. Было бы неплохо, если бы вы могли исправить ссылку.

Ваш ответ на вопрос