Какой атрибут определяет перенос слов. Как добавить с помощью свойств CSS перенос строки

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

Дефис

Первое решение для переноса длинных слов – с помощью дефиса.

Defisi { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

Поддержка браузерами: CSS-дефисы поддерживаются почти всеми современными браузерами, за исключением Chrome, Opera, Android. Также, очень часто дефис вставляется в местах, ошибочных с грамматической точки зрения.

Обрыв слова

Обрыв слова – это свойство CSS, указывающее на то, следует ли разрывать строки внутри слов.

Obriv-slova { -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

Поддержка браузерами: Обрыв слов поддерживается во всех браузерах, за исключением Opera Mini и старых версий Opera.

Обертка переполнения

Следующее решение – это использование Обертки переполнения (overflow-wrap).

Obertka-perepolneniya { word-wrap: break-word; overflow-wrap: break-word; }

Поддержка браузерами: поддерживается практически во всех браузерах. Примечание: Некоторые браузеры требуют использования «word-wrap» вместо «overflow-wrap».

Многоточие

Еще один вариант – использование многоточий.

Mnogotochiye { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

Поддержка браузерами: поддерживается всеми современными браузерами.

Это работающий метод, но далеко не идеальный.

Финальное решение: Использование Обертки переполнения и дефиса.

Finalnoye-resheniye { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

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

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

Пример

word-wrap

Cуществительное

высокопревосходительство

Одушевленное существительное

одиннадцатиклассница

Химическое вещество

метоксихлордиэтиламинометилбутиламиноакридин

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

Рис. 1. Перенос длинных слов

Объектная модель

Объект .style.wordWrap

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
 пользователем. Таким образом, white-space
 имитирует
 работу тега Но в отличие от него не меняет шрифт
 на моноширинный.
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
Значения
 normal
 Текст в окне браузера выводится как обычно, переносы строк устанавливаются
 автоматически.
 nowrap
 Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой;
 вместе с тем, добавление тега 

 переносит текст
 на новую строку.
 pre
 Текст показывается с учетом всех пробелов и переносов, как они были добавлены
 разработчиком в коде HTML.
 Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
 pre-line
 В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
 pre-wrap
 В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
 inherit
 Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
HTML5
CSS2.1
IE
Cr
Op
Sa
Fx

 

 
 
 white-space
 
 
 
 
Пример
 
 
 
 Великая теорема Ферма

 X ⁿ
 + Y ⁿ =
 Z ⁿ

 где n - целое число > 2
 
 
 
 

Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
document.getElementById("elementID
").style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line
, pre-wrap
 и inherit
. Для </p>
<p>Opera до версии 9.5 не поддерживает значение pre-line
. Для <textarea>
 значения normal
 и pre
 ведут себя как pre-wrap
, а значение nowrap
 ведет себя как pre-line
.</p>
<p>Safari до версии 3.0 и iOS не поддерживают значения pre-wrap
 и pre-line
.</p>
<p>Firefox до версии 2.0 включительно не поддерживает значения pre-line
 и pre-wrap
. Для <textarea>
 значения normal
, nowrap
, и pre
 воспринимаются как pre-wrap
.</p>
<p>При верстке у веб-мастеров периодически возникает вопрос: как будет осуществляться перенос текста? В большинстве случаев браузер самостоятельно справляется с этой задачей. Но иногда этот процесс приходится брать под контроль, особенно оформляя длинные слова и фразы, которые при неправильном переносе теряют смысл.</p> <h2>Свойство word-wrap</h2> <p>В HTML для разделения строк существует специальный тег <br>. Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме. Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:</p><p> <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Проверка перенова слов</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 
</body>
</html>
 </p><p>Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки <a href="/malware/evolyuciya-ipod-kratkaya-istoriya-ipod-novyi-ipod-touch-novyi-ipod-vneshnii/">внешнего вида</a> элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.</p> <p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/59435/2842719.jpg' width="100%" loading=lazy></p> <p>Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и <a href="/windows-10/proslushka-telefona-po-nomeru-abonenta-bez-dostupa-k-telefonu-i/">мобильными телефонами</a> на базе iOS.</p><p>Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:</p><p>P{
font: bold 30px Helvetica, sans-serif;
width: 25px;
word-wrap: break-all;
}
 </p><p>Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.</p> <p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/59435/2842729.jpg' width="100%" loading=lazy></p> <h2>Свойство white-space</h2> <p>Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали "Ввод", браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.</p><p>В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши "Ввод". White-space со значением pre-line заставит браузер видеть в тексте Enter.</p><p> <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Проверка перенова слов</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
 body{
 width: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 -ms-align-items: center;
 align-items: center;
 }
 #wrapper{
/*Элементу-контейнеру необходимо обязательно задать ширину!*/
 width: 60%;
 background: linear-gradient(to bottom, rgba(0,0,0,.1),rgba(0,0,0,.8));
 }
 #wrapper p{
 color: #FFF;
 padding: 10px;
 font: bold 16px Helvetica, sans-serif;
 white-space: pre-line;
 }
 </style>
</head>
<body>
 
</body>
</html>
 </p><p>Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:</p><p> #wrapper p{
 color: #FFF;
 padding: 10px;
 font: bold 16px Helvetica, sans-serif;
 white-space: nowrap;
}
 </p><h2>Text-overflow</h2> <p>Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:</p> <ul><li>clip — просто обрезает текст;</li> <li>ellipsis — добавляет многоточие.</li>
</ul> #wrapper p{
 color: #FFF;
 padding: 10px;
 font: bold 16px Helvetica, sans-serif;
 text-overflow: ellipsis;/*Добавляем многоточие*/
 white-space: nowrap; /* Запрещаем перенос строк */
 overflow: hidden;/*Прячем все что выходит за рамки контейнера*/
 }
 <p>Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.</p>
<p>Влад Мержевич</p>
 <p>В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных <a href="/windows-server/planshety-apple-ipad-planshety-apple-ipad-operacionnaya-sistema---eto/">операционных системах</a> и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.</p>
<h2>Использование тега <wbr></h2>
<p>Тег <wbr>
 введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем <wbr>
 (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега <wbr>
 создаёт перенос.</p>
<p>Пример 1. Тег <wbr></p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Переносы</title>
 <style> </style>
 </head>
 <body>
 <p class="word">Один<wbr>надцатиклас<wbr>сница
 Анжелика после окончания школы выбрала профессию
 дело<wbr>произ<wbr>водитель<wbr>ницы.</p>
 </body>
</html>
</p><p>Результат данного примера показан на рис. 1.</p>
<p>Рис. 1. Текст с переносами слов</p>
<h2>Мягкий перенос</h2>
<p>Применение <wbr>
 имеет серьёзный недостаток - понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол -
. Он выполняет ту же роль, что и тег <wbr>
 - не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).</p>
<p>Пример 2. Мягкий перенос</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Переносы</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 }
 </style>
 </head>
 <body>
 <p class="word">Один-надцатиклас-сница Анжелика
 после окончания школы выбрала профессию
 дело-произ-водитель-ницы.</p>
 </body>
</html>
</p><p>Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/blog/break_2.png' height="169" width="182" loading=lazy></p>
<p>Рис. 2. Текст с переносами слов</p>
<h2>Свойство word-break</h2>
<p>Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break
 со значением break-all
 (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.</p>
<p>Пример 3. Применение word-break</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Переносы</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 word-break: break-all;
 }
 </style>
 </head>
 <body>
 <p class="word">Одиннадцатиклассница Анжелика после окончания школы
 выбрала профессию делопроизводительницы.</p>
 </body>
</html>
</p><p>Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/blog/break_3.png' height="148" width="182" loading=lazy></p>
<p>Рис. 3. Текст с переносами слов</p>
<p>Из всех перечисленных способов «полуручной» с использованием -
 даёт наилучший результат - соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.</p>
<h2>Свойство hyphens</h2>
<p>И, наконец, самое мощное и удобное свойство для автоматического добавления переносов - hyphens
. Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега <html>
 добавляем атрибут lang
 со значением ru
 (пример 4).</p>
<p>Пример 4. Использование hyphens</p><p>
 <!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Переносы</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 }
 </style>
 </head>
 <body>
 <p class="word">Одиннадцатиклассница Анжелика
 после окончания школы выбрала профессию
 делопроизводительницы.</p>
 </body>
</html>
</p><p>Результат данного примера показан на рис. 4.</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/blog/break_4.png' height="146" width="182" loading=lazy></p>
<p>Рис. 4. Текст с переносами слов</p>
<h2>Запрет переносов</h2>
<p>Нередко возникает и обратная задача - запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).</p>
<p>Пример 5. Использование</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Переносы</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 }
 </style>
 </head>
 <body>
 <p class="word">Озеро по координатам
 70° 58′ 19″ с. ш.
 97° 24′ 5″ в. д.
 расположено в Таймырском Долгано-Ненецком
 районе Красноярского края России.</p>
 </body>
</html>
</p><p>В данном примере для корректного написания координат используется , который не позволяет переносить текст.</p>

<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
	escape(document.referrer)+((typeof(screen)=="undefined")?"":
	";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
	screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
	";"+Math.random()+
	"border='0' width='1' height='1' loading=lazy>");</script>
</div>
              
              <dblock></dblock>
		
		<dblock></dblock>



            <dblock></dblock>

        
        <dblock></dblock>

            

    
        <dblock></dblock>

    
            </div>
                    

        
    </div>

    <div class="grid_4">
        

<ul id="sidebar">
    <div class="widget cat-lists">
        <div class="outer">
            <div class="menu-sidebar-container">
                <ul id="menu-sidebar" class="menu">
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/android/">Android</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/apple/">Apple</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/hardware/">Hardware</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/malware/">Malware</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/networks/">Networks</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/software/">Software</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows/">Windows</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows-10/">Windows 10</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows-7/">Windows 7</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows-server/">Windows Server</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows-xp/">Windows XP</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/drivers/">Драйверы</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/educational-program/">Ликбез</a></li>
                                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/social-networks/">Социальные сети</a></li>
                    
                </ul>
            </div>
        </div>
        <script>
            function fd() {
                var menu = document.querySelector('.menu-wrapper') // Using a class instead, see note below.
                menu.classList.toggle('active');
            }

            function fds(e) {
                var menu = document.querySelector('.' + e) // Using a class instead, see note below.
                menu.classList.toggle('active');
            }
        </script>
    </div>
    <li id="text-46" class="widget widget_text">
        <div class="textwidget">
            
        </div>
    </li>
    <li id="text-9" class="widget widget_text">
        <div class="textwidget">
            
            <div class="subscription" id="sidebar-sub">
                <div class="gradient-sub"></div>
                <p class="head-sub">Присоединяйтесь!</p>

                <p class="description-sub">
                    Уже подписаны более 6 000 человек.<br> Получайте самые свежие статьи.
                </p>

                <form action="/" method="post" target="_blank" id="subscr-form-6292" onsubmit="return jc_chkscrfrm(this, false, false, false, false)">
                    <input type="text" name="lead_email" class="sr-required" placeholder="Введите ваш e-mail" maxlength="100">
                    <button type="submit" name="lead_subscribe" value="Подписаться">ПОДПИСАТЬСЯ</button>
                </form>
                <div class="ribbon"></div>
            </div>
            
        </div>
    </li>
    <li id="text-36" class="widget widget_text">
        <div class="textwidget">
          
        </div>
    </li>
    <div id="sticky-anchor"></div>
    <div id="sticky">
        <div id="owl-demo2" class="owl-carousel owl-theme">
            <div class="item">
                
            </div>
        </div>
    </div>
    <script>
        var stk = true;
    </script>
    <style>
        #owl-demo2 .item {
            background: #3fbf79;
            margin: 10px;
            color: #FFF;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            text-align: center;
        }

        .customNavigation {
            text-align: center;
        }

        //use styles below to disable ugly selection
        .customNavigation a {
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
    <link href='/assets/owl.theme.css' rel='stylesheet' type='text/css'>
    <link href='/assets/owl.carousel.css' rel='stylesheet' type='text/css'>
    <link href='/assets/owl.transitions.css' rel='stylesheet' type='text/css'>
</ul>



    </div>
    <div class="clear"></div>

<a class="btn-floating btn-large red" href="#"></a>
<footer>
    <script type="text/javascript">
        function GoTo(link) {
            window.open(link.replace("_", "http://"));
        }
    </script>
    <div class="grid_12">
        <p id="footer"><a href="/">Современные гаджеты</a> - Копирование материалов строго запрещено.
            <br><a href=""  target="_blank">О проекте</a>
            <br><a href=""  target="_blank">Реклама на сайте</a>



            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script type="text/javascript" src="/assets/modernizr.min.js"></script>
            <script type="text/javascript" src="/assets/jquery.slicknav.js"></script>
            <script type="text/javascript" src="/assets/main.js"></script>
            <script type="text/javascript" src="/assets/include.js"></script>
            <script type="text/javascript" src="/assets/jquery.fancybox.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.fancybox').fancybox();
                });
            </script>
            <script type="text/javascript">
                window.___gcfg = {
                    lang: 'ru'
                };

                (function() {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>





            <div id="fb-root"></div>
            <script>
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "https://connect.facebook.net/ru_RU/all.js#xfbml=1";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
            </script>

    </div>
    <div class="clear"></div>

</footer>
</div>
<script type='text/javascript' src='/assets/jquery.form.min.js'></script>

<script type='text/javascript' src='/assets/scripts.js'></script>

<script type='text/javascript' src='/assets/postviews-cache.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<script type='text/javascript' src='/assets/form.js'></script>
<script type='text/javascript' src='/assets/jquery.fancybox-1.3.8.min.js'></script>
<script type='text/javascript' src='/assets/jquery.easing.min.js'></script>
<script type="text/javascript">
jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } );
jQuery(document).on('ready post-load',easy_fancybox_handler);
jQuery(document).on('ready',easy_fancybox_auto);</script>

</body>
  
  <script>// <![CDATA[
$(".closed").toggleClass("show");
 
$(".title").click(function(){ 
 $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
 if ($(this).parent().hasClass("show"))
     $(this).children(".title_h3").css("background","#bbbbbb");
 else $(this).children(".title_h3").css("background","#dddddd");
} );
// ]]></script>
<script>
$(".single-post .post a:has(img), .single-post .entry-content a:has(img)").fancybox();
$('.sub-menu').parent().addClass('after');
        $('.mobile_menu .ya-site-form__input-text').attr('id', 'unstapble-transparent');
        $('.sub-menu').parent().children('a').attr("onclick", "$(this).parent().toggleClass('active');return false;");
        // $('.nav-list-mobile li a').click(function() { 
        //   $(this).parent().toggleClass('active');
        //   return false;
        // } );
        function tg_menu () { 
            $('.mobile_menu').toggleClass('active');
            $('.google_search_mob').toggleClass('active');
        } ;
	if (stk) { 
	$(document).ready(function() { 
            $(window).scroll(sticky_relocate);
            sticky_relocate();
            function sticky_relocate() { 
                var window_top = $(window).scrollTop();
                var div_top = $('#sticky-anchor').offset().top;
                if (window_top > div_top) { 
                    $('#sticky').addClass('stick');
                } else { 
                    $('#sticky').removeClass('stick');
                } 
            } 
        } );
	} 
	if (carusel) { 
	
	} 
        </script>
        <script src="/assets/owl.carousel.min.js"></script>
<script>
                var owl2 = $("#owl-demo2");
                owl2.owlCarousel({ 
                   items : 1, //10 items above 1000px browser width
                   lazyLoad : true,
                   itemsDesktop : [1000,1], //5 items between 1000px and 901px
                   itemsDesktopSmall : [900,1], // betweem 900px and 601px
                   itemsTablet: [600,1], //2 items between 600 and 0
                   itemsMobile : [479,1] // itemsMobile disabled - inherit from itemsTablet option
                } );
                // Custom Navigation Events
                // $(".next").click(function(){ 
                //   owl.trigger('owl.next');
                // } )
                // $(".prev").click(function(){ 
                //   owl.trigger('owl.prev');
                // } )
                owl2.trigger('owl.play',5000); //owl.play event accept autoPlay speed as second parameter
                // $(".stop").click(function(){ 
                //   owl.trigger('owl.stop');
                // } )
</script>
</html>