Как обрезать текст под ширину дива?

Question

[Алексей]

Добрый вечер. Имеется див, ширина которого задана в % и фикс высота. Так же имеется большой текст, overflow которого задан как hidden, т.е часть текста которая не влезла просто скрылась. Вопрос, как сделать так, чтоб эта часть текста обрезалась, а не просто скрылась.

Comments

[ajderha]

word-wrap: break-word;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;

[Алексей]

ajderha, имеется ввиду что лишний текст должен вырезаться, т.е. даже в F12 не видно.

[Ankhena]

Алексей Михалев, и какой смысл, если при разной ширине окна будет показано разное количество текста?
Хотите что-то скрыть - отрежьте на бэке.

[Сергей delphinpro]

Ankhena, но бэк ведь не знает, какого размера область на фронте. Отсюда следует вывод, что задача нерешаема.

Хотя если подойти формально, то можно на javascript вычислить сколько текста помещается, и остальное обрезать. По F12 видно не будет. Хотя, конечно из view-source текст никуда не денется.

[Сергей delphinpro]

Алексей Михалев, Требования выглядят, мягко говоря, странными. Для чего так нужно?

[Ankhena]

Сергей delphinpro, это я понимаю.
Просто в задаче сомнительный смысл. Вот и предложила вариант с бэком.

[Lord_Dantes]

Сергей delphinpro, Ankhena, похоже на пример какого-то платного контента в демо-версии.

[Lord_Dantes]

Алексей Михалев, если вам нужно показать небольшой кусок платного контента, так отправляйте с бэка просто этот кусок и всё.

[Ankhena]

Lord_Dantes, довольно странно, что размер доступного контента зависит от размера окна

[Lord_Dantes]

Ankhena, автор кажется не писал ничего про окно, речь об ширине дива.

[Ankhena]

Lord_Dantes, ага, но чисто по логике, раз ширина в %, а не фикс, то в конечном итоге она зависит от окна.
Но, возможно, в этом вопросе другое логическое пространство.

Answer 1

[Никита]

Нууу, например можно так.

Назовём ваш див А.
Создайте див Б с шириной, аналогичной диву А, и абсолютным позиционированием, уберите его куда-нибудь за пределы экрана (чтобы не маячил). Далее начните в него постепенно (кусками) добавлять текст из дива А, при этом сверяя каждый раз высоту дива Б. Как только высота дива Б станет больше дива А, берите полученный текст без последней итерации - вы получите как раз обрезанный текст, который вмещается в нужную вам высоту. После этого див Б удалите.

Comments

[Никита]

Или просто погуглите готовые "библиотеки" :)