Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.09.2017, 14:34   #1
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
Счастье Как сократить текст и вывести многоточие?

Здравствуйте!
Подскажите пожалуйста, как можно сделать так, чтоб текст не полностью выводился, и добавлялось многоточие?
Женя32 вне форума Ответить с цитированием
Старый 28.09.2017, 14:51   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

либо стилем (смотрите на аттрибут text-overflow - тыц,тыц, тыц)
либо JS скриптом.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 28.09.2017, 15:32   #3
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
либо стилем (смотрите на аттрибут text-overflow - тыц,тыц, тыц)
либо JS скриптом.
атрибут почему-то не работает: https://codepen.io/RenusAvin/pen/RRBWpP
Женя32 вне форума Ответить с цитированием
Старый 28.09.2017, 15:52   #4
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от Женя32 Посмотреть сообщение
атрибут почему-то не работает:
может быть, потому что Вы забыли его написать?
https://codepen.io/anon/pen/boWvOa

Последний раз редактировалось Serge_Bliznykov; 28.09.2017 в 15:59.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 28.09.2017, 16:05   #5
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
может быть, потому что Вы забыли его написать?
https://codepen.io/anon/pen/boWvOa
Нет, чуть-чуть ни так нужно...

Вот полный текст:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
Как его сократить до такого:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.....</p>

Последний раз редактировалось Женя32; 28.09.2017 в 16:15.
Женя32 вне форума Ответить с цитированием
Старый 28.09.2017, 16:25   #6
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

тогда JS скриптом
Код:
function text_crop() {
  var size = 305;
  var elem = document.querySelectorAll('.box');
  for (var i=0; i<elem.length; i++) {
     //elem[i] - i узел в коллекции NodeList
     var text = elem[i].innerHTML;
     if (text.length > size) {
       text = text.slice(0, size-10);
      elem[i].innerHTML = text + '...';
     }
  }
}
text_crop();
https://codepen.io/anon/pen/vemjmJ

либо можно ограничить через CSS количество отображаемых строчек.
пример с оверфлоу:
Код:
.box p{
    width: 600px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3; /* number of lines to show */
   line-height: 1;        /* fallback */
   max-height: 3;       /* fallback */
}
https://codepen.io/anon/pen/LzymdW



p.s. я не мастер. пример нашёл поиском.

Последний раз редактировалось Serge_Bliznykov; 28.09.2017 в 16:36.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 28.09.2017, 18:46   #7
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
По умолчанию

Спасибо большое! Все работает!
Женя32 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможно ли сократить код? А так же вывести периметр и площадь Oxidous Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 7 23.12.2015 12:06
Как сократить текст в Word'e по следующему алгоритму? duh96 Microsoft Office Word 31 24.02.2013 07:59
Как вывести текст и изображение одновременно? vovken1997 Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 2 14.09.2012 22:39
как вывести текст на экран (TASM) Аlex Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 2 05.03.2010 19:53
как вывести текст из БД nikleb PHP 2 27.06.2008 10:13