Как скрыть текст css

Как скрыть лишний текст в блоке

Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.

HTML-разметка:

Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden .

Результат будет не очень информативный:

Многоточие

Свойство text-overflow: ellipsis добавляет многоточие к скрываемому тексту и работает только в паре с white-space: nowrap (отменяет переносы строк). Но можно сделать такой приём для нескольких строк текста с помощью свойств display: -webkit-box и -webkit-line-clamp: 4 .

Результат:

Градиент по тексту

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

Результат:

Второй вариант с затуханием сверху вниз:

Результат:

Если используется фоновое изображение, то подойдёт вариант с использованием background-clip: text – наложение изображения или градиента на текст.

Скрыть текст с помощью css

С помощью css я хочу заменить текст своим фактическим логотипом. У меня нет логотипа, нет проблем, изменяя размер тега и помещая фоновое изображение через css. Однако я не могу понять, как избавиться от текста. Я видел, как это делалось раньше, в основном, выталкивая текст с экрана. Проблема в том, что я не могу вспомнить, где я ее видел.

ОТВЕТЫ

Ответ 1

Это один из способов:

Вот другой способ, чтобы скрыть текст, избегая огромного 9999-пиксельного окна, которое создаст браузер:

Ответ 2

Почему бы просто не использовать:

Ответ 3

Просто добавьте font-size: 0; к элементу, содержащему текст.

Ответ 4

Самый дружественный для всех браузер способ — написать HTML как

затем используйте CSS, чтобы скрыть диапазон и заменить изображение

Если вы можете использовать CSS2, то есть несколько лучших способов использования свойства content , но, к сожалению, веб еще не на 100%.

Ответ 5

Джеффри Зельдман предлагает следующее решение:

Он должен быть менее ресурсоемким, чем -9999px;

Пожалуйста, прочитайте все об этом здесь:

Ответ 6

Скрытие текста с учетом доступности:

В дополнение к другим ответам, вот еще один полезный подход для скрытия текста.

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

Стоит отметить, что этот класс в настоящее время используется в Bootstrap 3.

Если вам интересно узнать о доступности:

Ответ 7

Смотрите mezzoblue для хорошего резюме каждой техники с сильными и слабыми сторонами, плюс пример html и css.

Ответ 8

Не использовать < display:none; >Это делает контент недоступным. Вы хотите, чтобы экранные считыватели отображали ваш контент и визуально стирали его, заменяя текст изображением (например, логотипом). Используя text-indent: -999px; или аналогичный метод, текст по-прежнему существует — просто визуально нет. Используйте display:none , и текст ушел.

Ответ 9

Так много сложных решений.

Самый простой — просто использовать:

Ответ 10

Ответ состоит в том, чтобы создать промежуток со свойством

Вы можете найти пример на этом сайте

Ответ 11

вы можете использовать свойство css background-image и z-index , чтобы гарантировать, что изображение остается перед текстом.

Ответ 12

Вышеупомянутое хорошо работает и в последнем Thunderbird.

Ответ 13

Почему бы вам не использовать:

Если у вас нет элемента span или div, он отлично работает для ссылок.

Ответ 14

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

Вот несколько хороших ресурсов для начала работы с технологиями замены стандартных изображений:

Ответ 15

Использовать тег условия для разных браузеров и использовать css, который вы должны разместить height:0px и width:0px также нужно разместить font-size:0px .

Ответ 16
Ответ 17

Если целью является просто сделать текст внутри элемента невидимым, установите для атрибута цвета 0 непрозрачность, используя значение rgba, такое как color:rgba(0,0,0,0); чистое и простое.

Ответ 18

Попробуйте этот код, чтобы сократить и скрыть текст

Ответ 19

вернуть содержимое с помощью CSS

Ответ 20

Если мы можем редактировать разметку, жизнь может быть проще, просто удалите текст и будьте счастливы. Но иногда разметка была помещена JS-кодом или нам просто не разрешили ее редактировать вообще, слишком плохое css оказалось единственным оружием, доступным в нашем распоряжении.

Мы не можем помещать <span> обертывание текста и скрытие всего тега. Кстати, некоторые браузеры не только скрывают элементы с display:none , но также отключают компоненты внутри.

Оба font-size:0px и color:transparent могут быть хорошими решениями, но некоторые браузеры не понимают их. Мы не можем полагаться на них.

Использование overflow:hidden обеспечивает нашу ширину и высоту. Некоторые браузеры (не будут называть их. IE) могут читать ширину и высоту как min-width и min-height . Я хочу, чтобы окно было увеличено.

Ответ 21

Обычно я использую:

Ответ 22

Использование нулевого значения для font-size и line-height в элементе делает трюк для меня:

Ответ 23

Чтобы скрыть текст из html, используйте свойство text-indent в css

/* для динамического текста вам нужно добавить белое пространство, поэтому ваш прикладной css не будет мешать. nowrap означает, что текст никогда не будет перенесен на следующую строку, текст будет продолжаться в той же строке, пока не будет встречен тег <br>

Ответ 24

Я не помню, где я взял это, но использовал его успешно целую вечность.

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

Ответ 25

Один из способов добиться этого — использовать :before или :after . Я использовал этот подход в течение нескольких лет, и особенно хорошо работает с векторными значками глифов.

Ответ 26

Это работало для меня с диапазоном (проверка нокаута).

Ответ 27

Решение, которое работает для меня:

Ответ 28

Вы можете просто скрыть свой текст, добавив этот атрибут:

Ответ 29

Лучший ответ работает для короткого текста, но если текст обертывает его, он просто отображается на изображении.

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

Как скрыть текст внутри блока?

Есть блок с текстом. Как скрыть текст внутри этого блока?

Есть несколько вариантов реализации скрытия текста:

Просто обернуть текст в блоке в span и скрыть его

Установить элементу font-size: 0 . Но это способ работает не во всех старых браузерах

Установить text-indent: -9999px (или -999em); или text-indent: -999em;

Вариант с использованием того же text-indent , но только с определённым сочетанием стилей: text-indent: 100%; white-space: nowrap; overflow: hidden;

Вариант приближённый к скрытию. Во всяком случае текста не видно

Использовать нулевой шрифт. Т.е. специальный шрифт, в котором нет букв. К сожалению, я такого найти не смог

Использовал font-size:0; таким образом скрыл текст

если важно, чтоб текст был но его не было видно — можно использовать:

Если нужно скрыть только часть текста (например чтобы при наведении показывать весь блок):

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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