Как спрятать часть текста на CSS или кнопка»Еще»?

Есть блок в котором находится описание товара. Возможно ли сделать с помощью свойств CSS, если текст больше блока, то часть его скрывается и появляется кнопка, по нажатию на которую блок с текстом полностью открывается. Сейчас в голове только вариант с помощью overflow: hidden и js или label, input. менять высоту блока.

Отслеживать
задан 22 ноя 2016 в 12:14
4,936 3 3 золотых знака 18 18 серебряных знаков 38 38 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Можно вот так сделать

button .text < display: block; width: 300px; height: 10px; border: 1px solid black; padding: 5px; margin-top: 5px; outline: none; overflow: hidden; >.text:focus, button:focus ~ .text

 
Кнопка 
Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!
 

Отслеживать
ответ дан 28 дек 2016 в 19:32
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков

Если Вы хотите именно кнопку, чтобы на неё кликать, то тут без js не обойтись. На чистом CSS можно сделать следующее: по умолчанию задать блоку какую-то строгую высоту и overflow: hidden, а по наведению (hover) менять высоту на auto.

#block < border: 1px solid black; width: 200px; height: 100px; overflow: hidden; padding: 5px 10px; font-size: 14px; >#block:hover

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 

Скрытие покажет: html и css как инструменты отображения контента

Некоторые элементы страницы необходимо скрывать. Это происходит по разным причинам, однако в особенности скрытие актуально для адаптации веб-ресурса к разным платформам: ПК и мобильным устройствам.

При этом скрытые элементы могут быть не в одном состоянии. Вариантов 3: элемент может быть невидим полностью и, вообще, удалён из потока документов; элемент может быть невидим для пользователя, однако он будет находиться в документе и ассистивные технологии смогут его считать; элемент будет открыт для пользователя, но ассистивные технологии не смогут его считывать.

Всё это можно сделать посредством HTML (язык разметки) и CSS (язык описания внешнего вида документа, в случае данной статьи — страницы) прямо в админке.

Атрибут hidden (убираем полностью)

Скрывает элементы при условии, что их видимость не включена вручную посредством CSS. Вообще, если говорить о последнем, атрибут Hidden работает аналогично CSS-«способу» display: none;

Предположим, какой-то большой заголовок на веб-странице должен отображаться только тогда, когда ширина области отображения элемента больше 500 пкс. В таком случае в HTML пишем:

Большой заголовок

CSS:
@media (min-width: 500px) h1 display: none;
>
#hidden display: block;
>
>

Теперь по поводу display (априори это свойство есть у всего, что прописано коде страницы), после того, как вы укажете его значение как none: невидимыми станут и все потомки выбранного элемента. При этом место скрываемого займёт другой, следующий за ним по цепочке.

Атрибут aria-hidden (убираем частично)

Скрывает элемент и делает его полностью недоступным для считывающего программного обеспечения, что позволяет программам работать со страницами быстрее. В то же время указанный элемент остаётся видим для пользователя.

Прописывается в HTML следующим образом:

Чаще всего данный атрибут применяют, чтобы спрятать от программ считывания дублируемый текст, свёрнутые или перемещённые «за экран» элементы, а также чтобы убрать декоративную графику. При этом действие скрытие распространяется только на программы, не на пользователей ресурса.

Свойство opacity (убираем, но не заметаем следы)

Со значением 0 прячет от пользователя (но только от него) элемент со всеми вложениями. При этом на странице вместо скрытого элемента образуется пробел. Данное свойство ненаследуемое.

CSS:
h1 opacity: 0;
>

Свойство visibility (убираем выборочно 2)

Аналог предыдущего. На странице так же остаётся пробел, однако на поток данное изменение не влияет. Здесь важно помнить, если данное свойство применяется к родительскому элементу, то скрыты будут и все потомственные. Чтобы избежать этого для конкретного случая, пропишите тому, что необходимо оставить, visibility: visible.

HTML:

CSS:
article visibility: hidden;
>

img visibility: visible;
>

В таком случае на странице будет видна только картинка (потомственный элемент родительского — статьи, включающего заголовок, иллюстрацию и текст).

Позиционирование в слепой зоне (убираем, но не очень тщательно)

Спрятать элемент можно, переписав его позицию. Иными словами, поместив необходимую часть наполнения страницы за пределы её видимости или исправив значения размера на 0.

CSS:
img position: right;
top: -100%;
>

Указанное будет перенесено из области видимости на новое прописанное значение, таким образом он будет скрыт из поля зрения пользователя. Однако если последний использует клавиатуру и доберётся до элемента, последний станет видим.

CSS:
img position: right;
top: 0;
>

Свойство clip-path (убираем оригинально)

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

CSS:
img clip-path: inset(0 0, 0 0, 0 0, 0 0);
>

В данном случае 0 — это значение, при котором кусок элемента не будет видим для пользователя. В clippy вы определяете нужные значения (они будут написаны внизу экрана цветным шрифтом), которые затем копируете из программы и вставляете в CSS вашей страницы. Так же данный инструмент позволяет менять форму объекта (прописывается в коде вместо inset). Например, круг (circle), треугольник (triangle) и т. д.

И ещё кое-что

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

CSS:
.button span color: transparent;
font-size: 0;
>

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

Как написать невидимый текст

Желание скрыть часть контента может возникать по разным причинам. Выяснять, для чего скрывают текст, картинки и другие элементы страницы, не станем, лучше узнаем, как написать невидимый текст, спрятать фотографию, баннер, ссылку различными способами. Для реализации большинства методов потребуются минимальные знания в области программирования и HTML-разметки.

Как скрыть текст на сайте

Используем HTML-код

Чтобы при помощи HTML создать скрытый текст, нужно открыть исходный код страницы, найти скрываемое слово или предложение и установить цвет шрифта таким же, как цвет фона страницы. После загрузки страницы в браузере текст сольется с фоном и станет невидимым. Также предложения можно сделать практически невидимыми путем изменения размера шрифта до очень маленького. Еще один вариант: скрыть текст под изображением, которое дополнительно может сливаться с фоном и быть из-за этого невидимым.

Используем DHTML

Динамический HTML-код состоит из обычного HTML, каскадных таблиц стилей и элементов языка сценариев. Он позволяет вносить изменения в содержимое страниц без их перезагрузки. Для реализации задуманного пользователю потребуется создать небольшой код CSS и установить его в теле страницы между тегами body. Каскадные таблицы стилей дают практически безграничные возможности в плане изменения внешнего вида контента. В примере текст скрыт, но при нажатии на кнопку он появляется. Если пользователю требуется только скрыть контент, то часть кода можно удалить.

Скрываем текст на странице в динамическом HTML-коде

Как скрыть текст на странице в DHTML

При помощи стилей можно прятать ссылки, предложения, текстовые блоки, таблицы, изображения, используя свойства скрываемого объекта. Например, свойства opacity, visibility, display, position, clip-path позволяют скрывать объекты разными способами.

Методы скрытия объектов в DHTML

Способы скрытия объектов

Методы скрытия объектов в DHTML

Способы скрытия объектов

Используем JavaScript

Код скрипта можно вписывать как в заголовок, так и в тело страницы между тегами head или body соответственно. Главное, не забыть обозначить начало и конец кода. Для этого пользуются тегами script.

Сначала надо написать функцию, которая будет скрывать контент.

Код функции на JavaScript для скрытия контента

Функция для скрытия контента в JavaScript

Далее в нужном месте кода страницы следует запросить вывод результата работы скрипта.

Вывод результата работы JS-скрипта

Вывод результата работы скрипта

При помощи данного скрипта была скрыта большая часть статьи. Ссылка «Подробнее» необходима для отображения спрятанного контента и одновременного скрытия самой ссылки после появления текста, так как в ней отпала необходимость.

Ссылка ‘Подробнее’ в коде страницы на JavaScript

Ссылка ‘Подробнее’ в JavaScript

Еще один пример. Этот скрипт нужно вставить в тело страницы в нужном месте. После загрузки страницы в браузере пользователь увидит две кнопки: «Скрыть» и «Показать». Нажав на соответствующую, он увидит или скроет alalala. Если вас заинтересовал вопрос, как сделать тег невидимым, то вам следует внимательнее относиться к написанию кода. Правильно написанные и использованные теги не отображаются браузерами, поэтому скрывать их нет необходимости.

text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Синтаксис

text-overflow: clip | ellipsis

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .