Троеточие в конце большого текста

@Kucc · Регистрация: 21.06.2013

Студворк — интернет-сервис помощи студентам

Мне нужно задать троеточие в конце в случае, если блок (р) выше 140px, ну или можно указать количество строк
Можно было бы использовать это:

CSS
1
line-clamp

Но не подходит, ибо не кроссбраузерный). На всех просторах интернета написано очень просто - обрезка текста в одну строку:

CSS
1
2
3
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

а мне надо в конце. Например представим, что в блок не влазит последнее слово,надо поставить троеточие на предпоследнем слове

HTML5
1
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus commodi officia aperiam accusantium vitae velit, iste, placeat pariatur itaque, dignissimos consectetur mollitia! Enim temporibus reprehenderit non, harum minima maiores quaerat.</p>

Я пытался через js брать высоту, но что дальше делать без понятия

@Fedor92 · 27.11.2016, 19:37

Kucc, на CSS это будет выглядеть следующим образом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html, body{width: 100%; height: 100%}
    p{width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus commodi officia aperiam accusantium vitae velit, iste, placeat pariatur itaque, dignissimos consectetur mollitia! Enim temporibus reprehenderit non, harum minima maiores quaerat.</p>
</body>
</html>

Если ширина параграфа должна определятся динамически, то тему надо перенести в js...

@Kucc · 27.11.2016, 19:40 **[ТС]**

Fedor92, это если строка одна, а мне надо обрезка в конце многострочного текста. Но спасибо, пойду в js

@Fedor92 · 27.11.2016, 19:43

Сообщение от Kucc

Fedor92, это если строка одна, а мне надо обрезка в конце многострочного текста. Но спасибо, пойду в js

Ну здесь Вам скорее всего нужна функция для подсчёта определённого количества символов, обрезки лишнего текста и подстановки троеточия в конце...

@Kenworth · 28.11.2016, 12:15

Есть вариант подключить библиотеку dotdotdot.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Kucc 5 / 2 / 3 Регистрация: 21.06.2013 Сообщений: 117
	27.11.2016, 19:40 [ТС]
	Fedor92, это если строка одна, а мне надо обрезка в конце многострочного текста. Но спасибо, пойду в js 0

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	28.11.2016, 12:15
	Есть вариант подключить библиотеку dotdotdot. 1