Я хочу, чтобы обрезать текст или строку с многоточием, используя JavaScript

Question

Я ищу простой сценарий, который может укоротить строку с многоточием (...)

Я хочу, чтобы укоротить что-то вроде 'this is a very long string' к 'this is a ve...'

Я не хочу использовать CSS или PHP.

Answer 1

Что-то вроде:

var line = "foo bar lol"; 
line.substring(0, 5) + '...' // gives "foo b..." 

Answer 2

HTML с JavaScript:

<p id="myid">My long long looooong text cut cut cut cut cut</p> 

<script type="text/javascript"> 
var myid=document.getElementById('myid'); 
myid.innerHTML=myid.innerHTML.substring(0,10)+'...'; 
</script> 

Результат будет:

My long lo... 

Приветствия

Г.

Answer 3

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

Answer 4

Если вы хотите вырезать строку для specifited длины и добавить точки использовать

// Length to cut 
var lengthToCut = 20; 

// Sample text 
var text = "The quick brown fox jumps over the lazy dog"; 

// We are getting 50 letters (0-50) from sample text 
var cutted = text.substr(0, lengthToCut); 
document.write(cutted+"..."); 

Или, если вы хотите вырезать не по длине, но со словами подсчитывать использование:

// Number of words to cut 
var wordsToCut = 3; 

// Sample text 
var text = "The quick brown fox jumps over the lazy dog"; 

// We are splitting sample text in array of words 
var wordsArray = text.split(" "); 

// This will keep our generated text 
var cutted = ""; 
for(i = 0; i < wordsToCut; i++) 
cutted += wordsArray[i] + " "; // Add to cutted word with space 

document.write(cutted+"..."); 

Удачи ...

Answer 5

function truncate(string, length, delimiter) { 
    delimiter = delimiter || "…"; 
    return string.length > length ? string.substr(0, length) + delimiter : string; 
}; 

var long = "Very long text here and here", 
    short = "Short"; 

truncate(long, 10); // -> "Very long ..." 
truncate(long, 10, ">>"); // -> "Very long >>" 
truncate(short, 10); // -> "Short" 

Answer 6

У KooiInc есть хороший ответ на этот вопрос. Подводя итог:

String.prototype.trunc = 
     function(n){ 
      return this.substr(0,n-1)+(this.length>n?'…':''); 
     }; 

Теперь вы можете сделать:

var s = 'not very long'; 
s.trunc(25); //=> not very long 
s.trunc(5); //=> not... 

Полный кредит идет в KooiInc для этого.

Answer 7

Это поставит многоточие в центре линии:

function truncate(str, max, sep) { 

    // Default to 10 characters 
    max = max || 10; 

    var len = str.length; 
    if(len > max){ 

     // Default to elipsis 
     sep = sep || "..."; 

     var seplen = sep.length; 

     // If seperator is larger than character limit, 
     // well then we don't want to just show the seperator, 
     // so just show right hand side of the string. 
     if(seplen > max) { 
      return str.substr(len - max); 
     } 

     // Half the difference between max and string length. 
     // Multiply negative because small minus big. 
     // Must account for length of separator too. 
     var n = -0.5 * (max - len - seplen); 

     // This gives us the centerline. 
     var center = len/2; 

     var front = str.substr(0, center - n); 
     var back = str.substr(len - center + n); // without second arg, will automatically go to end of line. 

     return front + sep + back; 

    } 

    return str; 
} 

console.log(truncate("123456789abcde")); // 123...bcde (using built-in defaults) 
console.log(truncate("123456789abcde", 8)); // 12...cde (max of 8 characters) 
console.log(truncate("123456789abcde", 12, "_")); // 12345_9abcde (customize the separator) 

Например:

1234567890 --> 1234...8910 

И:

A really long string --> A real...string 

Не совершенным, но функциональный. Простите чрезмерное комментирование ... для noobs.

Answer 8

Самый простой и гибкий способ: JSnippet DEMO

Функция стиль:

function truncString(str, max, add){ 
    add = add || '...'; 
    return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str); 
}; 

Прототип

String.prototype.truncString = function(max, add){ 
    add = add || '...'; 
    return (this.length > max ? this.substring(0,max)+add : this); 
}; 

Использование:

str = "testing with some string see console output"; 

//By prototype: 
console.log( str.truncString(15,'...') ); 

//By function call: 
console.log( truncString(str,15,'...') ); 

Answer 9

Попробуйте

function shorten(text, maxLength, delimiter, overflow) { 
    delimiter = delimiter || "…"; 
    overflow = overflow || false; 
    var ret = text; 
    if (ret.length > maxLength) { 
    var breakpoint = overflow ? maxLength + ret.substr(maxLength).indexOf(" ") : ret.substr(0, maxLength).lastIndexOf(" "); 
    ret = ret.substr(0, breakpoint) + delimiter; 
    } 
    return ret; 
} 

$(document).ready(function() { 
    var $editedText = $("#edited_text"); 
    var text = $editedText.text(); 
    $editedText.text(shorten(text, 33, "...", false)); 
}); 

Checkout рабочий образец на Codepen http://codepen.io/Izaias/pen/QbBwwE

Answer 10

Это ограничит его к однако многие строки, которые вы хотите, она ограничена и отзывчив

Идея, что никто не предложил, это делать основанный на высоте элемента, а затем отбрасывая его обратно оттуда.

Fiddle - https://jsfiddle.net/hutber/u5mtLznf/ < - ES6 версия

Но в основном вы хотите, чтобы захватить высоту строки элемента, проходную весь текст и останавливаются, когда его на высоту некоторых линий:

'use strict'; 

var linesElement = 3; //it will truncate at 3 lines. 
var truncateElement = document.getElementById('truncateme'); 
var truncateText = truncateElement.textContent; 

var getLineHeight = function getLineHeight(element) { 
    var lineHeight = window.getComputedStyle(truncateElement)['line-height']; 
    if (lineHeight === 'normal') { 
    // sucky chrome 
    return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']); 
    } else { 
    return parseFloat(lineHeight); 
    } 
}; 

linesElement.addEventListener('change', function() { 
    truncateElement.innerHTML = truncateText; 
    var truncateTextParts = truncateText.split(' '); 
    var lineHeight = getLineHeight(truncateElement); 
    var lines = parseInt(linesElement.value); 

    while (lines * lineHeight < truncateElement.clientHeight) { 
    console.log(truncateTextParts.length, lines * lineHeight, truncateElement.clientHeight); 
    truncateTextParts.pop(); 
    truncateElement.innerHTML = truncateTextParts.join(' ') + '...'; 
    } 
}); 

CSS

#truncateme { 
    width: auto; This will be completely dynamic to the height of the element, its just restricted by how many lines you want it to clip to 
} 

Answer 11

Для предотвращения точки в середине слова или аф символа пунктуации.

let parseText = function(text, limit){ 
if (text.length > limit) 
    for (let i = limit; i > 0; i--){ 
     if(text.charAt(i) === ' ' && (text.charAt(i-1) != ','||text.charAt(i-1) != '.'||text.charAt(i-1) != ';')) { 
      return text.substring(0, i) + '...'; 
     } 
    } 
else 
    return text; 
};