Текст в одну строку и троеточие в конце CSS | Wiki | PWODEV

Как же порой раздражают длинные названия ссылок товаров, — по три строчки, — или длинных заголовков иных блоков. Как было бы здорово, если бы можно было все это дело как-то приужать, сделать компактнее. А при наведении мышкой уже показывать title полностью.

Для этого нам на помощь придет наш любимый CSS. Все очень просто, смотрите.

Допустим, у нас есть вот такой блок из каталога с товарами:

Вот его структура:

Вот его стили:

.someblock{ border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; } .header{ border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px; }

Согласитесь, выглядит ужасно. Конечно, можно сократить название товара. Но что делать, если таких сотни или тысячи? Можно также средствами php обрезать часть названия, ограничившись каким-то количеством символов. Но что делать, если потом поменяется верстка и блоки будут меньше или наоборот раза в 2-3 больше? Все это не вариант, все это нам не подходит.

И тут нам на помощь приходит CSS и его волшеблое свойство text-overflow. Но его нужно правильно использовать совместно с несколькими другими свойствами. Ниже я покажу вам готовое решение, после чего объясню что к чему.

Итак, отодвинув в сторону ручное редактирование названий товаров и программную обрезку стилей, мы берем в руки CSS и смотрим, что у нас получится:

Ну как, лучше? По-моему очень даже!

«Antananarivo» — перевод на русский

А поднесите мышку к названию… вуаля! Вот оно нам показывается полностью.

В структуре у нас ничего не поменялось, я лишь добавил диву с классом .header тег title. А вот новые, дополненные стили:

.someblock{ border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; } .header{ border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Смотрите, что мы сделали:

  • Мы добавили блоку свойство white-space: nowrap, которое убирает у текста возможность переноса слов на новую строку, тем самым вытягивая его в линию;
  • Затем мы добавили свойство overflow: hidden, которое ограничило видимость нашей строки шириной блока, тем самым обрезая все лишнее и не показывая его посетителю;
  • Ну и в конце мы добавили троеточие к нашей строке посредствам свойства text-overflow: ellipsis, тем самым давая посетителю понять, что это не конец строки, и что нужно, наверное, поднести мыщку и посмотреть ее полностью.

Любите CSS, изучайте CSS, и сайтостроительство не покажется вам такой уж сложной вещью =)

6836 просмотров

Апрель 11, 2015

работает только в следующих случаях:

  • Ширина элемента должна быть ограничена в (пикселях). Ширина в (в процентах) не будет работать.
  • Элемент должен иметь и .

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

Достопримечательности Антананариву

по умолчанию), он игнорирует его, и ничто другое не ограничивает его ширину.

Вы можете исправить это, выполнив одно из следующих действий:

  • Установите элемент для или (возможно, первый, но зависит от ваших потребностей макета).
  • Установите один из его элементов контейнера для и придайте этому элементу фиксированную или .
  • Установите элемент или (возможно, первый, но опять же, либо должен иметь тот же эффект, что и многоточие).

Я бы предложил , так как это будет иметь минимальное влияние на ваш макет; он очень похож на что он использует в настоящее время в отношении макета, но не стесняйтесь экспериментировать с другими точками; Я попытался дать как можно больше информации, чтобы помочь вам понять, как эти вещи соединяются вместе; большая часть понимания CSS — это понимание того, как различные стили работают вместе.

Надеюсь, это поможет.

Вот jsfiddle с вашим кодом, с добавлен, чтобы показать, насколько вы были близки.

Полезные ссылки:

Мы всегда хотим что бы на сайте все было аккуратно, но например у вас есть блоки с текстом который необходимо вписать в определенные границы , это может быть анонс к статье или описание товара.

Путеводитель по Антананариву

При этом текст у нас произвольной длины . Конечно можно постоянно подгонять текст под размеры поля что бы не чего не ехало, а можно сделать так чтобы лишний текст скрывался.

Для этого есть простое решение на CSS. Использование свойства text-overflow: ellipsis , которое позволяет обрезать строку с длинным тестом. Для того чтобы данное решение сработало необходимо указать ширину родительского блока, и иметь свойство overflow равное hidden или clip.

Решение для однострочного текста:

CSS:

.box-text { text-overflow: ellipsis; //образка длинных блоков с текстом overflow: hidden; //прятать выходящий за пределы текст width: 100%; //ширина блока с текстом white-space: nowrap; //запрет на перенос текста }

HTML:

<div class=»box-text»> Всё их оборудование и инструменты были живыми, в той или иной форме. </div>

Пример:

Решение для многострочного текста:

Но вот для обрезки многострочного текста на CSS придется прибегнуть к помощи псевдо-элементов :before и :after.

CSS:

.box-text { overflow: hidden; height: 200px; line-height: 25px; } .box-text:before { content: «»; float: left; width: 5px; height: 200px; } .box-text > *:first-child { float: right; width: 100%; margin-left: -5px; } .box-text:after { content: «\02026»; box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

HTML:

<div class=»box-text»> Левая сторона леса была темна, в тени; правая, мокрая, глянцевитая, блестела на солнце, чуть колыхаясь от ветра. Все было в цвету; соловьи трещали и перекатывались то близко, то далеко. </div>

Пример:

Всё их оборудование и инструменты были живыми, в той или иной форме.

Левая сторона леса была темна, в тени; правая, мокрая, глянцевитая, блестела на солнце, чуть колыхаясь от ветра. Все было в цвету; соловьи трещали и перекатывались то близко, то далеко.

Добавить комментарий

Закрыть меню