СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (1)

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

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

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

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

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

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

    Один из тегов - пусть это будет 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


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

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

    Всё тоже самое, что в выше приведенном пункте, но только мы добавим еще один 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>

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

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

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


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

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

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

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

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

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

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

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

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

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

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
три точки вместо лишнего текста
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.015615 секунд. Подробнее