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

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

06.07.2022 Марат 196 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
Подписаться + =

Последние комментарии :
Марат :
16.09.2022 14:58
Спасибо, что заметили! Действительно там он не…
подробнее.
Сергей Fortoo :
16.09.2022 13:37
unset ($price[$key]); Убить старый ключ нужно когда переименование ключа происходит в первоначальном массиве, а в…
подробнее.
Марат :
07.07.2022 13:02
Вам спасибо, что оценили! На ваш вопрос в одной строчке не ответишь, поэтому для вас отдельный пункт…
подробнее.
Борис :
07.07.2022 10:41
Спасибо за статью! Подскажите, пожалуйста, как сделать, чтобы файл создавался по имени из формы? Есть тест,…
подробнее.
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
ruweb
Страница загружена за : 0.018233 секунд. Подробнее