Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> добавить тороеточие в конец строки 
V
    Опции темы
patap
Дата 23.11.2009, 13:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

Репутация: нет
Всего: 40



Всем привет. Столкнулся с проблемой - есть div с фиксированным размером. Нужно все что не влезает скрывать и в конце поставить проеточие.
В верстке не силен, скрыть лишнее смог, а с троеточием - проблема. 

В данном случае - в диве должна быть строка
Код
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials,...


Код
<html>
<head>
  <style>
    .some-block {
      background: #D0D0D0;
      font: normal 0.8em Arial,sans-serif;
      color: #616161;
      overflow: hidden;
      height: 32px;
      width: 400px;
    }
  </style>
</head>
<body>
  <div class="some-block">
    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the “learning CSS” page
  </div>
</body>
</html>


прошу помощи

вообще реально это на CSS сделать?


Это сообщение отредактировал(а) patap - 23.11.2009, 13:38


--------------------
На боку кобура болталась, сзади шашка отцовская звякала. 
Впереди меня все хохотало, а позади все плакало (с)
PM MAIL ICQ   Вверх
K0T9I
Дата 23.11.2009, 13:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 44
Регистрация: 20.11.2009

Репутация: нет
Всего: 2



добавить ... можно так:

Код

.some-block:after{
  content:"&hellip;";
  color: #616161;
}


этот код добавляет содержимое content после блока, но при overflow:hidden; его не будет видно, и вообще это работает только в новых браузерах.

может быть можно, как-то встроенными блоками с абсолютным позиционирование, но это будет неоправдано сложно и, вполне возможно, что не кроссбраузерно.

PM MAIL   Вверх
patap
Дата 23.11.2009, 14:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

Репутация: нет
Всего: 40



K0T9I, похоже на правду, но немного не то. 
Я так подразумеваю, что прийдеться все это дело на стороне сервера решать... Я бы сразу так делал, но тут тоже пробелма есть: 
если решать средствами php, то возможен такой вариант - длинные слова. Т.е длина строки будет обрезана, а так как слова длинные, они будут в блоке переноситься на другую строку и может получиться, что весь текст не поместится в две строки, хотя по длине строка будет подходить

Это сообщение отредактировал(а) patap - 23.11.2009, 14:04


--------------------
На боку кобура болталась, сзади шашка отцовская звякала. 
Впереди меня все хохотало, а позади все плакало (с)
PM MAIL ICQ   Вверх
Pitbul
Дата 23.11.2009, 20:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет



patap
Это надо делать или на РНР (если у тебя не статичный сайт) или на JavaScript smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
FortMax
Дата 24.11.2009, 02:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

Репутация: 3
Всего: 5



лучше и проще этио реализовать на JavaScript (шоб мухи отдельно и компот отднльно) php - логика, а html+css+js - внешний вид  smile 

Это сообщение отредактировал(а) FortMax - 24.11.2009, 02:57


--------------------
user posted image
PM MAIL ICQ   Вверх
SelenIT
Дата 24.11.2009, 04:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



На всякий случай -
Код

text-overflow: ellipsis; /* для IE и Chrome */

Есть хитрые варианты вроде бы для все основных браузеров.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
patap
Дата 24.11.2009, 10:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

Репутация: нет
Всего: 40



Ок. всем спасибо. буду пробовать


--------------------
На боку кобура болталась, сзади шашка отцовская звякала. 
Впереди меня все хохотало, а позади все плакало (с)
PM MAIL ICQ   Вверх
bars80080
Дата 24.11.2009, 11:08 (ссылка) |  (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(SelenIT @  24.11.2009,  03:52 Найти цитируемый пост)
text-overflow

О сколько же открытий чудных
Дарует документов чтенье,
Источников открытье разных
Что не пропали в интернете.
PM MAIL WWW   Вверх
NYX
Дата 30.11.2009, 10:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 165
Регистрация: 9.1.2007
Где: Россия, Москва

Репутация: нет
Всего: нет



Перед вставкой текста в ограниченное пространство и так что бы текст был как бы урезан,
можно сделать так:
На сервере, перед вставкой текста, считается длинна строки\строк массива (если так).
Затем, из этой строки удаляются лишние N символов (допустим помещается 200 а занесено 500. Тогда надо убрать 300 символов). Затем убрать еще 3 символа, но с условием что это не нарушит слово... тогда ищем ближайший пробел от конца, затираем все что после него и ставим три точки. Так же что бы не было проблем с длинными словами, которые могут немного порезать вид, можно сделать такую функцию которая элементарно разбивает строку на массив с равным количеством символов в объекте массива,  указание переносов соответственно. Если будет время, помозгую над кодом (у меня PHP) и выложу smile

ЗЫ- замечу что это дело накладное, если на странице должно быть много таких областей, страница будет долго обрабатываться, тем более если запросов на страницу будет много.
В таком случае, удобнее будетсделать так:
При добавлении текста юзером, сервер автоматом урезает текст для превьюшной версии. Это будет занимать больше места на сервере, но меньше будет нагрузки smile

Это сообщение отредактировал(а) NYX - 30.11.2009, 10:28
--------------------
'long long long' is too long for GC
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0651 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.