Text indent

text-indent

Поддержка браузерами

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

Печатные издания используют общий стиль при оформлении абзацев — красную строку (отступ первой строки в абзаце). Абзацы на веб-страницах не имееют красной строки, так как браузеры, по умолчанию, разделяют их только вертикальными отступами без какого-либо дополнительного форматирования.

С помощью CSS свойства text-indent можно задать пустое горизонтальное пространство перед началом первой строки текста в элементе. Интервал будет отсчитываться от начала левого края (границы — border или внутреннего отступа — padding, если он задан) блочного родительского элемента.

Примечание: использование красной строки в html-документах значительно облегчает визуальное восприятие больших обьемов текста на веб-странице.

Значение по умолчанию: 0
Применяется: к блочным элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.textIndent=»50px»

Синтаксис

text-indent: величина|inherit;

Значения свойства

Значение Описание
величина Определяет размер отступа в единицах измерения, используемых в CSS.
% Определяет размер отступа в процентах от ширины родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
text-indent: 10px;
}

С помощью text-indent можно создать абзацный отступ или наоборот(при использовании отрицательных значений), создать выступ, то есть абзац с выступающей первой строкой в левую сторону.

text-indent

Урок 21. Скрытый текст с помощью JavaScript и с помощью динамического HTML



Для чего нужен скрытый текст?
Допустим, Вы не хотите отягощать свою страницу обилием какой-либо информации, например, вы хотите, разместить на Главной странице код вашего баннера, чтобы тот, кому понравится ваш сайт, мог поставить его на свою домашнюю страничку, однако, как мы можем догадаться, таких людей среди посетителей может оказаться немного и потому вывешивать код вашего баннера на всеобщем обозрении не имеет смысла. Лучше сделать маленький блок скрытого текста с маленькой, аrкуратной кникабельной надписью: Код нашего баннера. Тот, кому это нужно — нажмёт на надпись и увидит код. И совершенно не нужно на виду у всех выставлять html-потроха вашего баннера. Итак:

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

Код нашего баннера: <a href=»http://dugward.ru/» target=»_blank»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/22939.jpg» border=»0″ width=»88″ height=»31″ alt=»Литература и жизнь. Проблемы современной литературы»&gt </a&gt

Выглядит так:

Закрыть текст и читать далее.

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

Для начала поговорим о том, что для скрытого текста нам понадобится представлять себе, что такое «переменная». Несколько слов о том, что же это такое и почему она так важна

Скрытый текст, который я привела выше, сделан с помощью JavaScript. И вот по какому принципу он работает:
В компьютере все данные сохраняются на диске, в определённом месте, которое помечено, чтобы программа, которая отвечает за извлечение данных, знала, где что искать. Поскольку любой скрипт — это тоже программа, он точно так же работает с данными, под которые должно быть отведено определённое место. В данном случае, не в компьютере, а в коде вашей html-страницы. Поэтому вам необходимо занять место под те данные, которые, к примеру, помещаются в скрытом тексте. И пометить это место, чтобы в нужный момент программа нашла их и вывела на экран.
Переменной помеченный участок будет называться потому, что вы можете вложить в него любые значения, которые в нужный вам момент будут выводиться на экран с помощью скрипта. Нажимаете ссылку — и на экран выводятся те данные, которые вы поместили в скрытый текст. Пока всё просто, не так ли?
В коде нашей программы (скрипта) мы обозначаем нашу переменную каким-либо именем. В языке JavaScript есть некоторые ограничения для создания имён, о которых я здесь говорить не буду. Если вам понадобится скрипт скрытого текста — просто воспользуйтесь тем, что есть. Рассмотрим, из чего состоит наш код скрытого текста.

Весь скрипт будет выглядеть следующим образом: Этот сегмент ставим между <head&gt и </head&gt:

<script type=»text/javascript»&gt function displ(ddd) { if (document.getElementById(ddd).style.display == ‘none’) {document.getElementById(ddd).style.display = ‘block’} else {document.getElementById(ddd).style.display = ‘none’} } </script&gt

А этот сегмент помещаем в то место документа html, между <body&gt и </body&gt, где вам нужно:

<a href=»javascript: displ(‘var’)»&gt скрытый текст</a&gt
<div id=»var» style=»display: none;»&gt
Этот скрытый текст сделан с помощью JavaScript.

И вот по какому принципу он работает:… (далее по тексту)
<a href=»javascript: displ(‘var’)»&gt Закрыть текст и читать далее.</a&gt
</div&gt

Чтобы закрыть текст, необязательно нажимать ссылку «Закрыть текст». Можно вторично нажать первую ссылку. Чтобы нижней ссылки не было, просто уберите её (то есть, саму ссылку <a href=»javascript: displ(‘var’)»&gt Закрыть текст и читать далее.</a&gt )

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

Скрытый текст

Здесь у нас скрытый текст, который работает без JavaScript. Для того, чтобы понять, как он работает, читайте далее на странице:

Этот скрытый текст работает на динамическом HTML, или DHTML. Что такое DHTML:
Динамический html (Dynamic HTML) или DHTML — это не какой-то особенный язык для разметки страниц. Это обозначение страниц с динамически изменяемым без обновления страницы содержимым. Состоит DHTML из трёх компонентов: собственно html, элементов каскадных таблиц стилей (CSS) и элементов языка сценариев (JavaScript или VBScript). Эти три компонента связываются между собой, образуя своеобразный интерфейс, который и позволяет вносить в статическую html-страницу динамические изменения без перезагрузки всей страницы.

Весь скрипт, который позволяет внести элемент динамики в вашу html-страницу, вы устанавливаете в нужном вам месте страницы между тегами <body&gt и </body&gt . В данном случае этот сегмент выглядит следующим образом:

<span&gt <a href=»#» title=»скрытый текст» onclick=» obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!=’block’) ? ‘block’ : ‘none’;
obj.display=tmp;
return false;»&gt Скрытый текст</a&gt <div class=»subblock» style=»display: none»&gt
<span style=»color: blue;»&gt Здесь у нас скрытый текст, который работает без JavaScript. Для того, чтобы понять, как он работает, читайте далее на странице: </span&gt </div&gt </span&gt

Рассмотрим отдельные элементы:

onclick — это событие, которое происходит по нажатию левой кнопкой мыши.

obj — это тот сегмент, который будет содержать всё остальное (сходное с тегом textarea).

this.parentNode.childNodes[1].style (this — это, parent — родитель, Node — узел, child — ребёнок, Nodes — узлы). То есть, мы имеем соотношение между родительским и дочерним узлами, при чём вариант у нас всего один (либо текст, либо его нет).

tmp — могут сослаться на любое из следующих действий

obj.display! — В данном случае акцент на то, какой блок мы видим на экране.

block — то, в чём заключён текст.

none — ничто. То есть, нет никакого текста.

return false — ложный возврат

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

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

А здесь смотрим код впадающего меню в левой колонке:

<table width=100% border=»0″&gt
<tr&gt
<td align=»left» VALIGN=top&gt
<span&gt <a href=»#» title=»скрытый текст» onclick=»
obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!=’block’) ? ‘block’ : ‘none’;
obj.display=tmp;
return false;»&gt Литературная критика </a&gt <div class=»subblock» style=»display: none»&gt
<a href=http://dugward.ru/library/sodlib.html target=»_blank»&gt Тематический каталог </a&gt <br&gt
<a href=http://dugward.ru/library/sodlib_al.html target=»_blank»&gt Алфавитный каталог </a&gt
</div&gt </span&gt <br&gt

<span&gt <a href=»#» title=»скрытый текст» onclick=» obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!=’block’) ? ‘block’ : ‘none’;
obj.display=tmp;
return false;»&gt Прочие материалы сайта </a&gt <div class=»subblock» style=»display: none»&gt
<a href=http://dugward.ru/publ/publ.html target=»_blank»&gt Статьи </a&gt <br&gt
<a href=http://forum.dugward.ru/ target=»_blank»&gt Форум </a&gt <br&gt
<a href=http://lezione.dugward.ru/ target=»_blank»&gt Как мы делали этот сайт </a&gt <br&gt
<a href=http://dugward.ru/novel/novel.html target=»_blank»&gt Зарисовки прошлого и настоящего </a&gt
</div&gt </span&gt <br&gt

</td&gt
</tr&gt
</table&gt

И весь код страницы вместе с впадающим меню в левой колонке (код выпадающего меню выделен синим цветом):

<html&gt
<head&gt
<style type=»text/css»&gt
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style&gt
<title&gt Наша первая страница </title&gt
</head&gt
<body bgcolor=»#c0c0c0″ background=»f3.gif»&gt

<table width=»100%» cellspacing=»0″, cellpadding=»0″ border=»3″ VALIGN=top&gt
<td align=»left»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/52330.jpg» border=»0″&gt </td&gt
<td WIDTH=200px&
gt

<table width=»100%» border=»3″ cellspacing=»0″, cellpadding=»0″ VALIGN=top&gt
<td&gt
<table width=»100%» bgcolor=#e5e5e7 border=»0″&gt
<tr&gt
<td align=»center» WIDTH=19px&gt <a href=»http://dugward.ru/Sod.html»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/67915.jpg» border=»0″&gt </a&gt </td&gt
<td align=»left» VALIGN=top&gt <a href=»http://dugward.ru/Sod.html»&gt Читать книгу </a&gt </td&gt
</tr&gt
<tr&gt
<td align=»center» WIDTH=19px&gt <a href=»http://septemberfox.ucoz.ru/publ/»&gt
<img src=»https://bit-digest.ru/wp-content/uploads/2018/06/67915.jpg» border=»0″&gt </a&gt </td&gt
<td align=»left» VALIGN=top&gt <a href=»http://septemberfox.ucoz.ru/publ/»&gt Статьи </a&gt
</td&gt
</tr&gt
</table&gt
</td&gt
</table&gt

</td&gt
</table&gt
<table width=»100%» cellspacing=»0″, cellpadding=»0″ border=»0″&gt
<td WIDTH=200px VALIGN=top&gt

<table width=»100%» cellspacing=»0″, cellpadding=»0″ border=»3″ VALIGN=top&gt
<td&gt

<table width=»100%» bgcolor=#e5e5e7 border=»0″&gt
<tr&gt
<td align=»center»&gt
<table width=100% border=»0″&gt
<tr&gt
<td align=»left» VALIGN=top&gt
<span&gt <a href=»#» title=»скрытый текст» onclick=»
obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!=’block’) ? ‘block’ : ‘none’;
obj.display=tmp;
return false;»&gt Литературная критика </a&gt <div class=»subblock» style=»display: none»&gt
<a href=http://dugward.ru/library/sodlib.html target=»_blank»&gt Тематический каталог </a&gt <br&gt
<a href=http://dugward.ru/library/sodlib_al.html target=»_blank»&gt Алфавитный каталог </a&gt
</div&gt </span&gt <br&gt

<span&gt <a href=»#» title=»скрытый текст» onclick=» obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!=’block’) ? ‘block’ : ‘none’;
obj.display=tmp;
return false;»&gt Прочие материалы сайта </a&gt <div class=»subblock» style=»display: none»&gt
<a href=http://dugward.ru/publ/publ.html target=»_blank»&gt Статьи </a&gt <br&gt
<a href=http://forum.dugward.ru/ target=»_blank»&gt Форум </a&gt <br&gt
<a href=http://lezione.dugward.ru/ target=»_blank»&gt Как мы делали этот сайт </a&gt <br&gt
<a href=http://dugward.ru/novel/novel.html target=»_blank»&gt Зарисовки прошлого и настоящего </a&gt
</div&gt </span&gt <br&gt

</td&gt
</tr&gt
</table&gt

</td&gt
</tr&gt
</table&gt
</td&gt
</table&gt

</td&gt

<td VALIGN=top&gt
<table width=»100%» body bgcolor=#e5e5e7 border=»3″&gt <td align=»center»&gt

<table width=»95%» border=»0″ VALIGN=top&gt
<td align=»center»&gt
<font face=»Arial» font color=»#000000″ style=»font-size: 14pt»&gt
<p class=»p1″&gt
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p&gt
<p class=»p1″&gt
Текст, выровненный по ширине.

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p&gt
</font&gt
</td&gt
</table&gt
</td&gt
</table&gt
</td&gt
<td WIDTH=200px VALIGN=top&gt Баннеры <br&gt и реклама </td&gt
</table&gt

<table width=»100%» cellspacing=»0″ cellpadding=»0″ border=»3″&gt
<td align=»center»&gt Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br&gt

<br&gt
<a href=»http://palmernw.ru/» target=»_blank»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/19279.jpg» border=»0″ width=»88″ height=»31″ alt=»Монастыри и храмы Северо-запада»&gt </a&gt <a href=»http://dugward.ru/» target=»_blank»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/75128.jpg» border=»0″ width=»88″ height=»31″ alt=»Литература и жизнь. Проблемы современной литературы»&gt </a&gt <a href=»http://trustworthysw.ucoz.ru/» target=»_blank»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/15805.jpg» border=»0″ width=»88″ height=»31″ alt=»RPG Настоящие Звёздные Войны — II»&gt </a&gt <a href=»http://foxyfox3.narod.ru/index.html» target=»_blank»&gt <img src=»https://bit-digest.ru/wp-content/uploads/2018/06/27176.jpg» border=»0″ alt=»Форумные ролевые игры. Проблемы, решения, реклама»&gt </a&gt
<br&gt
</td&gt
</table&gt

</body&gt
</html&gt

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

Урок окончен.

Перейти к Уроку 22


© М.В. Гуминенко. 2008-2009 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Не используйте Это делает контент недоступным. Вы хотите, чтобы экранные считыватели отображали ваш контент и визуально стирали его, заменяя текст изображением (например, логотипом). Используя или аналогичный метод, текст все еще существует — просто не визуально там. Используйте , и текст ушел.


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


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

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

2.4. CSS-текст

См. ОБРАЗЕЦ КОДА


Ответ заключается в том, чтобы создать пролет с свойством

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


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

или скрыть использование в вашем классе css


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

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

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


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


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



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

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


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


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


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

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

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


Просто добавьте к элементу, содержащему текст.


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

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

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

Replacing the -9999px hack (new image replacement)


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

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

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

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

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


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

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


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

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


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

Вот несколько хороших ресурсов, чтобы начать работу по методам замены стандартных стандартов:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10


Используйте тег «Условия» для разных браузеров и используя css, вы должны разместить и также вы должны разместить .


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


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


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

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

Оба и могут быть хорошими решениями, но некоторые браузеры не понимают их. Мы не можем полагаться на них.

Я предлагаю:

Использование обеспечивает нашу ширину и высоту.

Свойство text-indent

Некоторые браузеры (не назовут их … IE ) могут читать ширину и высоту как и . Я хочу, чтобы окно было увеличено.


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

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


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

HTML

CSS


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




Это может не совсем ответить на вопрос, но это удовлетворило мои потребности, а может быть и другие.

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

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

jsfiddle демонстрация и примеры


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

В этом примере задается текст кнопки в соответствии с размером экрана.

Текст кнопки:

1) с: до

большой экранxxx

большой экран

2) с: после

Экран xxxbig

большой экран


Это работало для меня со встроенным текстом. Протестировано в FF, Safari, Chrome и Opera


Это реализует флажок в виде кнопки, которая показывает либо «Да», либо «Нет» в зависимости от состояния «проверено». Таким образом, он демонстрирует один способ замены текста с помощью CSS без необходимости писать какой-либо код.

Он будет по-прежнему вести себя как флажок, возвращающий (или не возвращающий) значение POST, но с точки зрения отображения он выглядит как кнопка переключения.

Цвета могут быть не по своему вкусу, они только там, чтобы проиллюстрировать точку.

HTML:

… и CSS:

Я только пробовал это в Firefox, но это стандартный CSS, поэтому он должен работать в другом месте.


Основываясь на share , это сработало для меня

§ Абсолютное позиционирование

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


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

факты


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

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

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