Я бы сделал лучше

    Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

    Что мы видим на первой же странице:
    image

    Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
    Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.

    Как это выглядит.

    Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для ИЕ8, но понимает это свойство и без него

    Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

    Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 28

      +2
      Обрезать текст (с точками или без) — плохо.
      А если от этого никуда не деться, мне нравится решение яндекса
      blogs.yandex.ru/ (смотреть «самые популярные блоги»)

      Все-равно, обрезать плохо :-)
        +6
        Xмм… как не странно первый раз вижу свойство «text-overflow: ellipsis».
        Обычно смотрю в htmlbook.ru, там такого нету, да и в автодополнении Dreamweawer'a нету.
        Проверил, в IE7 работает, в FF 3.0.7 не хочет, в Opera 9.63 работает даже без префиксов.
          –5
          проприетарное свойство. не рекомендую использовать.
            0
            пока это свойство вне спецификации, но уже поддерживается почти всеми браузерами
            и все течет — все изменяется, и то, чего нет в CSS2 появилось в CSS3
            так что знать об этом в общем целом полезно.
              –7
              что вы говорите что это css3 свойство, а даёте ссылку на msdn
              www.w3.org/TR/2002/WD-css3-text-20021024/
                0
                по причине того, что многими реализовано ellipsis, но не реализовано ellipsis-word, которое не упоминается на MSDN. и как я понимаю, MS автор этого свойства, потому и ссылка на них
                  –12
                  раз уж на то пошло, то авторы спецификации — люди и ссылки давать надо них домашнии страницы, нет?
              0
              Да почему не использовать-то?
              Те, кто не понимает, отреагируют как на ошибку в CSS, и проигнорируют правило.
              А те, кто понимает, сделают то, что должны :-)
              Это не HTML, тут правила обработки ошибок определены.
                –2
                до того как автор сделал пояснение было понятно только то, что это проприетарное свойство
              +6
              «Дааа… Студия Лебедева уже не та...» ©
                –3
                СамиЗнаетеКто © Лучше знает )
                +1
                Иногда покупаю через этот сайт всякую быт технику.
                вообще прифигел от сайта раньше как то удобней было, а щас какой то полуфабрикат получился или они пошутили или не доделали я так и не понял или кризис на заливки с экономили.

                Мне пофигу на картинки просто стало не удобно.
                  +11
                  Надо в Бизнес-линч отослать.
                    0
                    в последней мозилле обрезалось некрасиво «Съешь еще этих мягки» — так должно быть либо есть дополнительное свойство для браузера?
                      +1
                      мозилла не поддерживает это свойство
                        0
                        прошу прощения, невнимательно прочитал, значит по итогу в таком виде можно и не обращать внимания на данное свойство, очередной избранный костыль. Но все равно благодарю за информацию
                          +1
                          иногда мне кажется, что мозилла не поддерживает какие-либо свойства от MS по старой памяти. как было, например, с inline-block (inline-block тоже придумали в MS ;). Уже все его использовали, а мозилла держалась до выхода FF3
                          так, что мне кажется, что можно использовать)
                            0
                            Если говорить конкретно про свойство text-overflow: ellipsis — то ни ваш пример, ни мой локальный опыт не дал ожидаемого результата на версии Firefox 3.0.7
                            Может-когда нибудь в далекой далекой галактике… :)
                      +4
                      Как курсив без сглаживания то отвратненько смотрится…
                        +2
                        Я полагаю, тут надо решать проблему не версткой, а дизайном.
                          0
                          у меня одного иконки не ассоциируются с их описанием?
                          листок еще куда ни шло… а вот колокольчик у меня устойчиво ассоциируется с будильником и ни чем больше. Супер предложения тоже… вообще сайт отвратное впечатление стал производить.
                          Несколько раз наткнулся на 404 блуждая по ссылкам…
                            –1
                            Да иконки так себе. Хрен с ним, с колокольчиком, меня откровенно пугает третья — меч вставленный в задницу
                              +1
                              Честно говоря, меня когда-то пугал и меч, вставленный в голову, на твоём аваторе…
                                0
                                Ну я хоть не пытаюсь выдать это за что-то иное
                            +1
                            мне кажется что весь этот сайт — это пример-результат антикризисного предложения
                              +2
                              У Лебедева с технологами большая проблема. Да и вообще с технической точки зрения у него большие проблемы. А так как он к ним относится, то максимум что ему можно заказывать это дизайн в psd :)
                                0
                                как будто он сам верстает дизы))
                                –1
                                d-o-b.ru/test/ellipsis/

                                Only users with full accounts can post comments. Log in, please.