Цитата(skyboy @ 4.5.2013, 15:35  ) |
| или пляши с javascript способами детектирования overflow |
Можно об этом по подробнее?
| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > "text-overflow:ellipsis" как заставить работать? |
| Автор: animegirl 3.5.2013, 18:33 | ||
Есть контейнер DIV, вот его набор CSS:
При прорисовки контейнера, задаётся ему в добавок "maxWidth" и "maxHeight", смысл задумки в том, что бы контейнер расширялся в зависимости от количества текста, но до определённых рамок, всё что не поместилось, обрезается с точками в конце. Проблема в "white-space:nowrap;" если его убрать, то будет текст заполнятся как по плану, но не сработает "text-overflow:ellipsis;", если же его оставить то будет только одна строка, дойдёт до "maxWidth" и не будет пытаться писаться ниже. Как решить задачу? Желательно тривиально, без велосипедов и костылей. |
| Автор: Arantir 3.5.2013, 18:53 |
| text-overflow не документирован, то есть может работать как ему угодно. Обязательно делать именно три точки в конце? Можно добавить градиент с плавно уменьшающейся прозрачностью внизу блока с помощью :after (или before). А еще есть JavaScript. В наше время с выключенными скриптами только законченные параноики серфят по инету. JS стоит использовать так же смело, как вы используете CSS3. |
| Автор: skyboy 4.5.2013, 15:35 |
| 1. white-space: no-wrap бессмысленнен с height: auto 2. Судя по уменьшенной версии: div { width: auto; max-width: 100px; height: 100px; overflow: hidden; text-overflow: ellipsis; } комбинация width:auto + max-width + text-overflow сработают только в том случае, если у тебя есть одно слово, которое не умещается в max-width. в противном случае оно будет просто переноситься. а новая строка, которая не умещается по высоте, уже не рендерится как троеточие. выход: смени дизайн. или пляши с javascript способами детектирования overflow |
| Автор: animegirl 4.5.2013, 16:02 | ||
Можно об этом по подробнее? |