Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Valera21
0 / 0 / 0
Регистрация: 30.06.2016
Сообщений: 9
1

Обрезание текста при уменьшении окна браузера

17.01.2017, 10:43. Просмотров 229. Ответов 2
Метки нет (Все метки)

У меня есть картинка и рядом с ней три строчки текста. При уменьшении окна браузера текст сползает под картинку и становиться в пять строк. Как сделать чтоб текст обрезался и в конце третий строки добавлялось "...Еще" и при нажатии показывало весь текст?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.01.2017, 10:43
Ответы с готовыми решениями:

Прилепающее меню - отключение при уменьшении размера окна браузера
Добрый день! Есть такой скрипт. Прикрепляет меню сайта к верхнему краю...

Как вставить определённый код в видеоплеер при уменьшении окна браузера
Здравствуйте!Ув.форумчане...извините меня,я понимаю что я только...

Ре-инициализация виджета facebook при ресайзе окна браузера
Приветствую. Есть виджет блок с "кнопкой нравится" от фэйсбука. Ширина...

При закрытие окна браузера ie не срабатывает функция onUnload='showLogOffWindow()'
<html> <head> <title><%= APPLICATION_NAME %></title> <link...

Адаптивный слайдер типа Карусель начинает работать только при изменении окна браузера
Уважаемые коллеги! Прошу помощи. Установила адаптивный слайдер типа Карусель....

2
Balanaar
927 / 796 / 383
Регистрация: 11.07.2016
Сообщений: 2,348
17.01.2017, 11:50 2
Отлавливайте событие ресайза окна браузера, рассчитывайте размеры блоков после ресайза и заменяйте текст на "...Еще" при определённых вами размерах. Конкретнее что-то сказать сложно без конкретизации задачи.
P.S. Есть полезное CSS-свойство white-space. Может пригодиться.
0
andrey7287
30 / 27 / 14
Регистрация: 06.01.2016
Сообщений: 150
18.01.2017, 20:58 3
Это скорее по верстке вопрос.
HTML5
1
<p class="toggle" onclick="this.style.height = '100%';this.classList.add('full')">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quisquam, assumenda similique facere voluptates enim animi omnis doloremque magni eius unde. Et laboriosam, quo ut eum officiis nisi quis, eveniet.</p>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
p {
  width: 300px;
  position: relative;
  line-height: 1.4em;
  height: 4.2em;
  overflow: hidden;
  background: #fff;
  &::after {
    content: 'далее';
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.5em;
    height: 1.4em;
    background: #fff;
    color: red;
    text-decoration: underline;
  }
  &::before {
    content: '...';
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 2.5em;
    width: 2em;
    height: 1.4em;
    background: #fff;
  }
  &:hover {
     cursor: pointer;
     &::after{
      text-decoration: none; 
      
     }
  }
  &.full {
    &::after,
    &::before {
      display: none;
    }
  }
}
https://jsfiddle.net/e7ov6tnL/
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.01.2017, 20:58

Сворачивание окна по клику в любом месте окна браузера
Приветствую уважаемые форумчане. Есть сайт bm05.ru. Верху над логотипом есть...

Показ модального окна при изменении текста в тегах <p>
всем привет! такая ситуация, есть корзина, которая показывает по умолчанию...

Перезагрузка окна браузера
начал учить js неделю назад , добрался до браузерной части и первый раз...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru