Замена лишнего текста на три точки

"три точки вместо лишнего текста". Как заменить лишний текст тремя точками в html с помощью css. Пример замены лишнего текста с помощью трех точек!

О трех точках вместо лишнего текста:

1. Пример лишнего текста без трех точек.
2. Ставим три точки вместо лишнего текста.
3. Где использовать три точки вместо лишнего текста.

Пример лишнего текста без трех точек.

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

Один из тегов - пусть это будет div + ему нужен class, чтобы он отличался от всех других div-ов и много текста...

<div class=example>Здесь текст который может быть заменен на три точки вместо лишнего текста...</div>

Далее в стилях прописываем ширину значительно менее текста "width: 300px;" + чтобы не случилось переноса - white-space: nowrap;

<style>
.example {
width: 300px;
white-space: nowrap;
border: 1px solid red;
}
</style>

У нас получился лишний текст за пределами блока...

Лишний текст за пределами блока.

Здесь текст который может быть заменен на три точки вместо лишнего текста...

С лишним текстом разобрались... теперь в этом же блоке заменим лишний текст на три точки с помощью css




Ставим три точки вместо лишнего текста.

Выше вы должны были увидеть лишний текст, который вы можете превратить в три точки вместо лишнего текста! Для этого вам понадобится:

Всё тоже самое, что в выше приведенном пункте, но только мы добавим еще один class:

tree_point

И у нас получится:

<div class="example tree_point">Здесь текст который может быть заменен на три точки вместо лишнего текста...</div>

Теперь, чтобы вместо лишнего текста появились три точки вам нужно написать стили для этого!

Скроем все лишнее содержание с помощью overflow: hidden;.

Убираем лишний текст и ставим троеточие - text-overflow: ellipsis;

Наши новые стили для класса "tree_point"

<style>
.tree_point{
text-overflow: ellipsis;
overflow: hidden;
}
</style>

Пример замены лишнего текста на троеточие

Далее выведем весь приведенный код "замены лишнего текста на троеточие" прямо здесь:

Здесь текст который может быть заменен на три точки вместо лишнего текста...

Как видим - наш лишний текст замечательно заменился на три точки в конце!




Где использовать три точки вместо лишнего текста.

Как большинство тем на сайте https://dwweb.ru/, так и тема "три точки вместо лишнего текста" родилась не просто так! Для этого были причины.

Живой пример использования трех точек вместо лишнего текста.

Если вы откроете страницу "блог списокм", то увидите:

При разрешении монитора 1900px по ширине - все хорошо(обращаю ваше внимание на 4 строку):

Нажмите, чтобы открыть в новом окне.



Давайте изменим разрешение... например сделаем 500px по горизонтали и вы увидите, что список поломался, и строки начали налазить друг на друга и вообще выглядит отвратитетельно! И цифра, которая обозначает количество просмотров тоже убежала вместе со строкой...



Добавим резиновые стили и заменим лишний текст на три точки. Как видим, что наша строка осталась на том месте где и должна была быть. А лишний текст заменился на три точки: