Как ограничить длину текста в абзаце [дубликата]

Question

Как ограничить длину текста в абзаце [дубликата]

8

У меня есть абзац, как показано ниже, который может иметь любую длину:

Разрушение Индии: западные вмешательства в дравидийском и Dalit Faultlines - книга, написанная Радживом Малхотра и Аравиндан Неелакандан, который утверждает, что Индия целостность подрывается.

Я хочу, чтобы он отображался как:

Разрушение Индии: западные вмешательства в дравидийском и Dalit Faultlines - это книга, написанная Радживом Малхотра...

ниже - это код, который заполняет описание на моем веб-сайте:

В настоящее время описание переходит к любому типу. линии, основанной на продукте, мне нужно ограничить это до 3 строк.

user3193385 30 янв. 2014, в 05:23

Источник

2

Покажите код, пожалуйста?
Idris 30 янв. 2014, в 03:31
0

См. Jsfiddle.net/tewathia/89d22/1
tewathia 30 янв. 2014, в 03:40
0

@tewathia - я хочу, чтобы он был обрезан по умолчанию до некоторой длины текста. нажатие кнопки не требуется. как этого добиться?
user3193385 30 янв. 2014, в 03:55
2

Нажатие кнопки было только для демонстрации, вы можете автоматически обрезать длину текста, просто запустив код функции btn.onclick при загрузке страницы, para.innerText = para.innerText.substr(0, 100) + '...';
tewathia 30 янв. 2014, в 04:00

Показать ещё 2 комментария

Теги:

html

css

html5

1 ответ

Ещё вопросы

@tewathia - я хочу, чтобы он был обрезан по умолчанию до некоторой длины текста. нажатие кнопки не требуется. как этого добиться?
Нажатие кнопки было только для демонстрации, вы можете автоматически обрезать длину текста, просто запустив код функции btn.onclick при загрузке страницы, para.innerText = para.innerText.substr(0, 100) + '...';

Josh · Accepted Answer · 2014-01-30T05-21-00.000Z

Если вы хотите использовать только html и css, лучше всего использовать что-то вроде:

p {
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

Вот пример: http://jsfiddle.net/nchW8/ источник: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Если вы можете использовать javascript, вы можете использовать эту функцию:

function truncateText(selector, maxLength) {
    var element = document.querySelector(selector),
        truncated = element.innerText;

    if (truncated.length > maxLength) {
        truncated = truncated.substr(0,maxLength) + '...';
    }
    return truncated;
}
//You can then call the function with something like what i have below.
document.querySelector('p').innerText = truncateText('p', 107);

Вот пример: http://jsfiddle.net/sgjGe/1/

хотел сделать это только в css и html, но столкнулся с трудностями в том, чтобы сделать это для многострочного, поэтому решил использовать вышеупомянутый код javascript.