Разное

Html скрыть текст и показать по кнопке: HTML — показать/скрыть текст — Алексей Лавриненко | Oleksiy Lavrynenko

24.07.2023

Переполнение содержимого — Изучение веб-разработки

  • Назад
  • Обзор: Building blocks
  • Далее

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

Необходимые условия:Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (study Введение в CSS.)
Цель:Понять, что такое переполнение и как с ним работать.

Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством width и height (или inline-size и block-size). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.

Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.

Первый пример — это блок, который был ограничен установленным параметром height. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.

Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.

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

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

Если вы ограничиваете поле с помощью параметров width или height, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).

В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения переполнения. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение переполнения.

Свойство overflow позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – visible, что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить overflow: hidden. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании overflow: scroll браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия.

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

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

В приведённом выше примере нам нужно прокручивать содержимое только по оси y, однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство overflow-y (en-US), которое позволяет прокручивать содержимое только по оси y.

Вы также можете установить прокрутку по оси x с помощью overflow-x

(en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства word-break или overflow-wrap. Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со scroll, вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство

overflow, передав два значения. Первое значение будет относиться к overflow-x, а второе — к overflow-y. Если передать одно значение, то overflow-x и overflow-y получат одинаковые значения. Например, overflow: scroll hidden устанавливает overflow-x в scroll и overflow-y в hidden.

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте overflow: auto. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.

Когда вы используете значение overflow, такое как scroll или auto, вы создаете контекст форматирования блока (BFC). Содержимое блока, для которого вы установили параметр overflow приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.

Современные методы раскладки (описанные в разделе CSS раскладка) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.

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

При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).

В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. Проверь свои навыки: переполнение

(en-US).

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

  • Назад
  • Обзор: Building blocks
  • Далее
  1. Каскад и наследование
  2. Селекторы CSS
    • Селекторы типа, класса и ID
    • Селекторы атрибута
    • Псевдоклассы и псевдоэлементы
    • Комбинаторы
  3. Блочная модель(The box model)
  4. Фон и границы
  5. Обработка разных направлений текста
  6. Переполнение содержимого
  7. Значения и единицы измерения
  8. Размеры в CSS
  9. Элементы изображений, форм и медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация вашей CSS

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Как анимировать текст кнопки с использованием только CSS

Сегодня мы добьемся того, что вы видите ниже:

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

Без лишних слов, давайте начнем.

Шаг 1. Добавьте структуру html

Излишне говорить, что нам понадобятся два разных текстовых значения для кнопки.

Основной текст (New Blog) будет содержать текущую информацию, а скрытый текст (Read it now!) будет содержать значение, отображаемое при наведении курсора.

Вот код на данный момент:

<div>
  <div>New Blog</div>
  <div>Read it now!</div>
</div>

.btn {
  width: 200px;
  height: 50px;
  background-color: #0fabbc;
  border-radius: 25px;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  font-family: "Lucida Console", "Courier New", monospace;
}

Шаг 2: исходное состояние (без наведения)

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

.btn {
  width: 180px;
  height: 45px;
  background-color: #0d7377;
  border-radius: 25px;
  position: relative;
}
.text {
  width: 180px;
  height: 45px;
  position: absolute;
}
.primary {
  top: 0px;
}
.secondary {
  top: 80px;
}

Когда вы используете position: absolute;, он позиционируется относительно ближайшего расположенного родителя. Если вы посмотрите на приведенный выше код и изображение, мы указали .btn относительную позицию и абсолютное позиционирование дочерних div.

Итак, теперь всякий раз, когда вы пытаетесь изменить положение дочерних элементов div, они будут перемещаться относительно .btn, а не body.

Шаг 3. Состояние при наведении курсора

Если вы посмотрите на приведенный выше код, вы заметите, что мы дали классу .secondary максимальное значение 80 пикселей. Это текст нашей кнопки, который будет отображаться при наведении курсора.  При наведении курсора на кнопку верхнее свойство должно быть равно 0, чтобы оно находилось внутри поля кнопки.

Точно так же на этом этапе мы хотим, чтобы существующий текст («New Blog») освободил место для вторичного текста, поэтому мы переместим его вверх, установив верхнее значение -80 пикселей. Посмотрим на это в действии.

.btn:hover .primary {
  top:-80px
}
.btn:hover .secondary {
  top:0px
}

Но подождите, здесь чего-то не хватает?

О да, переход не выглядит очень плавным. Плюс почему другой текст все еще виден. Давай исправим.

Шаг 4. Добавьте немного анимации туда и сюда

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

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

.btn {
  overflow:hidden;
}
.text {
  transition: top 0.7s;
  -moz-transition: top 0.7s; // Firefox
  -webkit-transition: top 0.7s; // Safari and Chrome 
  -o-transition: top 0.7s; // Opera 
  -ms-transition: top 0.7s; // Explorer
}

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

css — Скрыть текст, оставить элементы значка

Задавать вопрос

спросил

Изменено 11 месяцев назад

Просмотрено 49 тысяч раз

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

На каждой странице есть панель действий с несколькими кнопками, каждая из которых состоит из значка и текста. Что-то вроде этого:

 

    <а href="">
        <я>
        Метка кнопки
    
    <а href="">
        <я>
        Метка кнопки

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

Если бы у меня была такая разметка:

 <а href="">
    <я>
    Ярлык кнопки

Тогда я знаю, что могу скрыть все ярлыки, выполнив:

 @media(max-width:768px) {
    .btn .label {
         дисплей: нет;
    }
}

Итак, мне интересно, существует ли чистый CSS-эквивалент этому, но с первой HTML-разметкой, где нет span.label ?

Вы можете установить нулевой размер шрифта:

 .btn { font-size: 0; }

Если ваши значки содержат текст, перезапишите их размер шрифта:

 . fa { font-size: initial; }

3

Вы можете использовать:

 @media(max-width:768px) {
    .btn {
        цвет: прозрачный;
    }
    .btn > .fa{
        черный цвет; //или цвет на ваш выбор
    }
}

Это скроет текст, но не влияет на размер кнопки.

Если вы знаете размер значков, вы можете установить этот размер на .btn s, а затем использовать position:absolute;top:0;left:0;z-index:1; на ваши иконки.

0

В некоторых случаях лучшим решением для установки «невидимой» метки для интерактивного элемента является использование свойства HTML «aria-label»:

или

Описание в MDN Web Docs

Предполагая, что ширина значков равна 1 em, вы можете сделать что-то вроде

 /* просто сделать значок видимым */
. fa.fa-значок {
  дисплей: встроенный блок;
  ширина: 1 см; высота: 1 см;
  фон:оранжевый;
}

а {
  дисплей: встроенный блок;
  ширина: 1см; /* устанавливается таким же, как иконка */
  белый цвет; /* устанавливается как фон */
  переполнение: скрыто;
} 
 <дел>
    <а href="">
        <я>
        Метка кнопки
    
    <а href="">
        <я>
        Метка кнопки

(где оранжевые квадраты — это значки; мне не хотелось включать весь FontAwesome, поэтому пришлось немного подделать.)

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как скрыть текст от программ чтения с экрана

Matt Ferderer

Matt Ferderer

  • 12 ноября 2020 г.
  • 4 Min read
  • 42 100 Просмотров
    9 0114 12 ноября 2020 г.
  • 4 мин чтения
  • 42 100 просмотров

Веб-разработка

Клиент -side Frameworks

Интерфейсная веб-разработка

Введение

Введение

Обычно на веб-сайт добавляют текст, ссылки и другие элементы, которые вы скрываете с помощью CSS или JavaScript, но это может привести к проблемам с использованием программ чтения с экрана и другие устройства.

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

Двумя наиболее распространенными средствами чтения с экрана являются JAWS и NVDA. Программа чтения с экрана NVDA бесплатна, а для JAWS требуется покупка лицензии.

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

Распространенные сценарии

На веб-сайте часто несколько раз отображается логотип для усиления бренда. Но каждый раз, когда программа чтения с экрана объявляет название вашей компании, это может раздражать. Это также замедлит работу пользователей программ чтения с экрана, когда они просматривают ваш контент. Логотипы и другие декоративные изображения на веб-сайте могут не приносить пользу человеку, который слушает содержание вашего веб-сайта. Это были бы отличные ситуации, чтобы скрыть контент от программы чтения с экрана.

В противоположном сценарии у вас может быть содержимое, скрытое визуально, но вы хотите убедиться, что программа чтения с экрана все равно прочитает его. У вас могут быть специальные инструкции для людей без визуального доступа. Чтобы решить эту проблему, на каждом веб-сайте должна быть якорная ссылка «перейти к основному содержанию», которая позволяет пользователю пропустить прослушивание менее важных разделов вашей страницы.

Дополнительный сценарий — скрыть содержимое ото всех. Ваш веб-сайт может потребовать от пользователя выполнения действия перед отображением контента. Кнопка развертывания и свертывания, кнопка «Подробнее» или панели, которые переключают содержимое, подходят как для этого сценария, так и для предыдущего сценария, в зависимости от того, сколько текста нужно показать или насколько этот текст важен.

Методы скрытия от программ чтения с экрана

Чтобы скрыть текст от программы чтения с экрана и отобразить его визуально, используйте aria-hidden и установите для него значение true.

Чтобы скрыть текст от программы чтения с экрана и скрыть его визуально, используйте атрибут hidden .

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

Чтобы показать элемент программе чтения с экрана и скрыть его визуально, вам нужно использовать шаблон CSS, чтобы текст отображался за пределами экрана или не помещался в видимую область в один пиксель. WebAim предлагает два решения.

Ловушки, на которые следует обратить внимание

Если вы используете aria-describedby в том же элементе, что и aria-hidden="true" , средство чтения с экрана может его прочитать.

Атрибут aria-hidden не работает с фокусируемыми элементами, такими как поля ввода формы, ссылки и кнопки.

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

 1

html

Заключение

Вы также можете прочитать рекомендации W3C по использованию ARIA.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *