Примечание

Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, существует специальный параметр NOWRAP тега . Об этом можно узнать в главе 4.

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

Свойство word-wrap

В HTML для разделения строк существует специальный тег
. Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме. Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:

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

Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.

Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:

P{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }

Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.

Свойство white-space

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

В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши "Ввод". White-space со значением pre-line заставит браузер видеть в тексте Enter.

Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:

#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; }

Text-overflow

Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:

• clip — просто обрезает текст;
• ellipsis — добавляет многоточие.

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

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

Версии CSS

Описание

Свойство 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

 

 
 
 
 
 
 
 
Пример
 

 
 
 Великая теорема Ферма

 X n
 + Y n =
 Z n

 где 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>

<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>
                    </article>



                    <div class="related-posts">
                        <h3 class="title text-uppercase text-center">Еще на эту тему:</h3>
                        <div class="row">
                                                             <div class="post article-wrp with-border col-sm-6 col-md-4">
                                    <div class="article-in-loop">
                                        <a class="thumb-title" href="/top-programm-dlya-udaleniya-draiverov-skachat-driver-sweeper/">
                                            
                                            <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
						<span class="embed-responsive-item">
							<span class="super-wrp">
								<span class="span-table">
									<span class="span-table-row">
										<span class="span-table-row-cell">
																						<img src="https://i2.wp.com/pc-assistent.ru/wp-content/uploads/2017/06/driver_sweeper_200x175.png" class="img-responsive" alt="Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты" loading=lazy>
										</span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            

                                            <span class="date">
						
                </span>
                                            <span class="title">
						Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты					</span>
                                        </a>
                                    </div>
                                </div>
                                                             <div class="post article-wrp with-border col-sm-6 col-md-4">
                                    <div class="article-in-loop">
                                        <a class="thumb-title" href="/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-chto/">
                                            
                                            <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
						<span class="embed-responsive-item">
							<span class="super-wrp">
								<span class="span-table">
									<span class="span-table-row">
										<span class="span-table-row-cell">
																						<img src="https://i2.wp.com/i.rutab.net/upload/tech_issues/audio_check.png" class="img-responsive" alt="Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3" loading=lazy>
										</span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            

                                            <span class="date">
						
                </span>
                                            <span class="title">
						Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3					</span>
                                        </a>
                                    </div>
                                </div>
                                                             <div class="post article-wrp with-border col-sm-6 col-md-4">
                                    <div class="article-in-loop">
                                        <a class="thumb-title" href="/kak-naiti-kartinu-po-fotografii-poisk-pohozhei-fotografii-v-internet-poisk/">
                                            
                                            <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
						<span class="embed-responsive-item">
							<span class="super-wrp">
								<span class="span-table">
									<span class="span-table-row">
										<span class="span-table-row-cell">
																						<img src="https://i2.wp.com/kompukter.ru/wp-content/uploads/2018/03/klikaem-po-znachku-foto-v-gugl.png" class="img-responsive" alt="Поиск похожей фотографии в интернет" loading=lazy>
										</span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            

                                            <span class="date">
						
                </span>
                                            <span class="title">
						Поиск похожей фотографии в интернет					</span>
                                        </a>
                                    </div>
                                </div>
                            
                            

                            

                            
                        </div>
                        
                    </div>



                 

                </div>
                



                <aside id="sidebar" class="col-sm-4 col-sidebar hidden-xs" role="complementary">
                    <div class="content-menu bs-docs-sidebar">
                        <div class="progress-right" id="progress-right">0%</div>
                        <script>
                            window.onscroll = function() {
                                var scrolled = window.pageYOffset || document.documentElement.scrollTop;
                                var scrollprogress = Math.round(scrolled / ((document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100));
                                document.getElementById('progress-right').innerHTML = scrollprogress + '%';
                            }
                        </script>



                        <div class="ad clearfix text-center">
                            

                        </div>
                        
                    </div>
                    


                    <script>
                        /**
                         * Скрипт закріплення блоку при прокрутці
                         */
                        (function() {
                            var a = document.querySelector('#sidebar'),
                                b = null,
                                P = 0;
                            window.addEventListener('scroll', Ascroll, false);
                            document.body.addEventListener('scroll', Ascroll, false);

                            function Ascroll() {
                                if (b == null) {
                                    var Sa = getComputedStyle(a, ''),
                                        s = '';
                                    for (var i = 0; i < Sa.length; i++) {
                                        if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
                                            s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; '
                                        }
                                    }
                                    b = document.createElement('div');
                                    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
                                    a.insertBefore(b, a.firstChild);
                                    var l = a.childNodes.length;
                                    for (var i = 1; i < l; i++) {
                                        b.appendChild(a.childNodes[1]);
                                    }
                                    a.style.height = b.getBoundingClientRect().height + 'px';
                                    a.style.padding = '0';
                                    a.style.border = '0';
                                }
                                var Ra = a.getBoundingClientRect(),
                                    R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
                                if ((Ra.top - P) <= 0) {
                                    if ((Ra.top - P) <= R) {
                                        b.className = 'stop';
                                        b.style.top = -R + 'px';
                                    } else {
                                        b.className = 'evr-sticky';
                                        b.style.top = P + 'px';
                                    }
                                } else {
                                    b.className = '';
                                    b.style.top = '';
                                }
                                window.addEventListener('resize', function() {
                                    a.children[0].style.width = getComputedStyle(a, '').width
                                }, false);
                            }
                        })()
                    </script>


                    <style>
                        /* Додаємо відступ вгорі, щоб було на одному рівні із змістом */

                        body.single #breadcrumbs {
                            margin-bottom: 5px;
                        }

                        #content article {
                            padding-top: 15px;
                        }

                        #sidebar .evr-sticky {
                            position: fixed;
                            z-index: 101;
                        }

                        #sidebar .stop {
                            position: relative;
                            z-index: 101;
                        }

                        #div-gpt-ad-30906309 {
                            margin-top: 20px;
                        }

                        #sidebar .evr-sticky #div-gpt-ad-30906309,
                        #sidebar .stop #div-gpt-ad-30906309 {
                            margin-top: 20px;
                        }

                        #sidebar .content-menu {
                            transition: 0.5s all;
                        }

                        #sidebar .content-menu .title {
                            padding-top: 15px;
                            font-size: 20px;
                            margin: 0 0 15px 0;
                        }

                        #sidebar .content-menu .title .glyphicon {
                            padding-right: 5px;
                        }

                        #sidebar .content-menu ul {
                            padding: 0;
                            margin: 0;
                            overflow: auto;
                        }

                        #sidebar .content-menu .nav li {
                            margin: 0;
                            clear: both;
                            margin-bottom: 4px;
                        }
                        /* Bullet before text */

                        #sidebar .content-menu .nav li a:before {
                            content: "●";
                            position: absolute;
                            font-size: 17px;
                            color: #dedede;
                            left: 0;
                            top: -1px;
                        }

                        #sidebar .content-menu .nav li a {
                            position: relative;
                            display: inline-block;
                            font-size: 15px;
                            color: #000;
                            line-height: 1.2;
                            padding: 3px 0 0 18px;
                            overflow: hidden;
                            text-decoration: none !important;
                        }

                        #sidebar .content-menu .nav li.active:focus>a,
                        #sidebar .content-menu .nav li.active:hover>a,
                        #sidebar .content-menu .nav li.active>a,
                        #sidebar .content-menu .nav li a:hover {
                            text-decoration: none;
                            font-weight: normal;
                            color: #c23085;
                            background-color: transparent;
                            border-left: 0 none;
                        }
                        /* Bullet before text */

                        #sidebar .content-menu .nav li.active>a:hover:before,
                        #sidebar .content-menu .nav li.active>a:before {
                            -moz-transform: scale(1.3);
                            -webkit-transform: scale(1.3);
                            transform: scale(1.3);
                            left: 1px;
                            color: #c23085;
                            background: transparent;
                        }

                        #sidebar .content-menu .nav li a:hover:before {
                            color: #c23085;
                            background: transparent;
                        }

                        #sidebar a.go-top {
                            display: block;
                            margin-top: 5px;
                            padding: 14px 0 5px 0;
                            text-align: center;
                            text-transform: lowercase;
                            font-size: 17px;
                            color: #666;
                            background: transparent url(/wp-content/themes/sk-Evrikak/i/go-top-in-sidebar.png) no-repeat 50% 50%;
                            opacity: 0;
                            transition: 0.2s all;
                        }

                        #sidebar a.go-top:hover {
                            color: #000;
                            text-decoration: none;
                        }
                        /* Якщо блок зафіксовний */

                        #sidebar .evr-sticky a.go-top {
                            opacity: 1;
                        }

                        #sidebar .evr-sticky {
                            box-shadow: -9px 0 10px 0 rgba(0, 0, 0, 0.08) !important;
                        }
                    </style>
                    <script>
                        jQuery(document).ready(function() {
                            // (c) http://jsfiddle.net/gableroux/S2SMK/
                            // підсвітка активного пункту меню, bootstrap
                            jQuery('body').scrollspy({
                                target: '.bs-docs-sidebar',
                                offset: 70
                            });


                            // даємо висоту меню, щоб зробити прокрутку
                            jQuery(window).bind("load resize", function() {
                                var body_w = jQuery("body").width(); // визначаємо ширину вікна

                                var window_h = jQuery(window).height(); // визначаємо висоту вікна
                                //alert(window_h);

                                if (body_w > '767') { // якщо ширина більша 767
                                    window_h = window_h - 375; // коригуємо висоту блоку з меню. віднімаємо висоту блоку «наверх», у  перспективі треба буще ще відняти інші-нові блоки
                                    var menu_h = jQuery('#sidebar .content-menu').height();
                                    //if(menu_h > window_h) { // якщо висота усього сайдбару більше висоти екрану, то вказуємо висоту для меню. Воно автоматично розтягне висоту сайдбару, з’явиться прорутка у меню, і сайдбар займе усю висоту вікна
                                    jQuery('#sidebar .content-menu ul.nav').css('height', window_h);
                                    //} 
                                }
                            });

                            // парсимо контент і формуємо меню
                            jQuery('#content .evr-section').each(function() {
                                var evr_section_id = jQuery(this).attr('id');
                                var evr_section_title = jQuery(this).find(':header:first').text();
                                var txt = '<li class="content-menu-item added-by-js"><a href="#' + evr_section_id + '">' + evr_section_title + '</a></li>';
                                //var txt = txt.unwrap();

                                //txt = jQuery('li', txt).unwrap;

                                //txt = txt.unwrap('h3');
                                //txt = jQuery(txt).wrap('<li>');
                                jQuery('#sidebar ul.nav').append(txt); // Insert
                            });

                            // Додаємо спеціальний клас для посилання на відео
                            jQuery('#sidebar .content-menu').find("a[href='#entry-video']").addClass('link-to-video');



                            // навігація по статті (плавна прокрутка до потрібного блоку)
                            jQuery('#sidebar .content-menu  .nav a').click(function() {
                                jQuery.scrollTo(this.hash, {
                                    offset: -10, // Відступ вгорі
                                    duration: 750
                                });
                                return false;
                            });


                            // перейти вгору (плавна прокрутка вгору)
                            jQuery('#sidebar a.go-top').click(function() {
                                jQuery.scrollTo(this.hash, {
                                    offset: 0, // Відступ вгорі
                                    duration: 450
                                });
                                return false;
                            });

                        });
                    </script>



                    
                    <link type="text/css" href="/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
                    
                    <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.mousewheel.js"></script>
                    
                    <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.min.js"></script>

                    <script>
                        // Прокрутка оновлюється при зміні висоти вікна
                        jQuery(function() {
                            jQuery('#sidebar .content-menu ul.nav').each(
                                function() {
                                    jQuery(this).jScrollPane({
                                        showArrows: jQuery(this).is('.arrow')
                                    });
                                    var api = jQuery(this).data('jsp');
                                    var throttleTimeout;
                                    jQuery(window).bind("load resize", function() {
                                        // IE fires multiple resize events while you are dragging the browser window which
                                        // causes it to crash if you try to update the scrollpane on every one. So we need
                                        // to throttle it to fire a maximum of once every 50 milliseconds...
                                        if (!throttleTimeout) {
                                            throttleTimeout = setTimeout(
                                                function() {
                                                    api.reinitialise();
                                                    throttleTimeout = null;
                                                },
                                                50
                                            );
                                        }
                                    });
                                }
                            )

                        });
                    </script>
                    <style>
                        /* Styles specific to this particular page */

                        .scroll-pane {
                            overflow: auto;
                            height: 400px;
                        }

                        .jspTrack {
                            background: #dedede;
                        }

                        .jspVerticalBar {
                            width: 6px;
                        }

                        .jspDrag {
                            background: #309dc6;
                        }
                    </style>


                </aside>
                
            </div>
            
        </div>
        


        <div class="other-posts">
            <div class="container">
                <h3 class="title text-uppercase text-center h">Другие статьи:</h3>

                <div class="row articles">

                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/samyi-moshchnyi-telefon-v-mire-na-dannyi-moment-samye-moshchnye-smartfony-top-10/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i1.wp.com/technosova.ru/wp-content/uploads/2018/10/2-2.jpg" class="img-responsive" alt="Самые мощные смартфоны Топ 10 самых мощных телефонов" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Самые мощные смартфоны Топ 10 самых мощных телефонов							</span>
                                    <span class="title">
								Современные технологии позволяют уместить в обычном смартфоне мощность и производительность...							</span>
                                </a>
                            </div>
                        </div>
                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/kak-udalitsya-iz-moego-mira-kak-udalit-stranicu-i-akkaunt-v-moem-mire/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i1.wp.com/socialnie-seti.info/wp-content/uploads/2012/09/galochki-dlya-ydaleniya-stranici.jpg" class="img-responsive" alt="Как удалить страницу и аккаунт в моем мире" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Как удалить страницу и аккаунт в моем мире							</span>
                                    <span class="title">
								Бывает так, что человек пройдя регистрацию понимает, что эта социальная сеть не для него и хочет...							</span>
                                </a>
                            </div>
                        </div>
                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/ne-udalyaetsya-avast-chto-delat-kak-udalit-avast-s-kompyutera-esli-on-ne/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i2.wp.com/vellisa.ru/wp-content/uploads/2018/05/2-1.jpg" class="img-responsive" alt="Как удалить аваст с компьютера если он не удаляется" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Как удалить аваст с компьютера если он не удаляется							</span>
                                    <span class="title">
								Сейчас мы разберем, как удалить Аваст, чтобы после деинсталляции антивируса, на компьютере не...							</span>
                                </a>
                            </div>
                        </div>
                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/kak-podklyuchit-nokia-lyumiya-800-k-kompyuteru-podklyuchenie-nokia-lumia-k/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i2.wp.com/sms-mms-free.ru/sites/default/files/images/Specifications_Nokia_800_Zune.jpg" class="img-responsive" alt="Подключение Nokia Lumia к ПК" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Подключение Nokia Lumia к ПК							</span>
                                    <span class="title">
								Статьи и Лайфхаки
 впервые могло разочаровать всех, кто недавно приобрёл данное мобильное...							</span>
                                </a>
                            </div>
                        </div>
                    
                    

                    

                    

                    

                </div>
                
            </div>
            
        </div>
        

        <style>
            /* Додаємо відступ внизу */

            body.single #content .ad {
                margin-bottom: 20px;
            }
            /* Додаємо відступ вгорі */

            body.single #sidebar .ad {
                margin-top: 20px;
            }
        </style>

        <footer id="footer" class="clearfix">
            <noindex>
                <div class="container row-1 hidden-xs">
                    <nav class="nav">
                        <div class="menu menu-footer">
                            <ul id="menu-podval" class="menu">
                                <li class="menu-item type-custom object-custom home "><a href="/">Главная</a></li>
                                <li class="menu-item type-post_type object-page "><a href="">О проекте</a></li>
                                <li class="menu-item type-post_type object-page "><a href="">Рекламодателям</a></li>
                                <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li>
                                <li class="menu-item type-post_type object-page "><a href="/feedback/">Обратная связь</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                

                <div class="border-blue clearfix"></div>

                <div class="container row-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <div id="text-2" class="block widget-container widget_text">
                                <div class="textwidget">
                                    <div class="sn">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u=https://battlecase.ru/teg-perenosa-na-druguyu-stroku-ispolzovanie-probelnyh-simvolov/"  target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/facebook.png" alt="" class="img-responsive" loading=lazy></a>
                                        <a href="https://vk.com/share.php?url=https://battlecase.ru/teg-perenosa-na-druguyu-stroku-ispolzovanie-probelnyh-simvolov/"  target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/vkontakte.png" alt="" class="img-responsive" loading=lazy></a>
                                        <a href="https://youtube.com/"  target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/youtube.png" alt="" class="img-responsive" loading=lazy></a>
                                    </div>
                                    <style>
                                        .sn a {
                                            display: inline-block;
                                            margin: 0 10px 0 0;
                                            width: 55px;
                                        }

                                        @media (max-width:767px) {
                                            .sn {
                                                text-align: center;
                                            }
                                            .sn a {
                                                margin: 0 7px;
                                                width: 43px;
                                            }
                                        }

                                        .sn a:hover {
                                            opacity: 0.9;
                                        }
                                    </style>
                                </div>
                            </div>
                        </div>

                    </div>
                    
                </div>
                

                <div class="border-3 clearfix"></div>

                <div class="container row-3">
                    <div class="row">
                        <div class="col-sm-8 col-txt col-txt-1">
                            Размещенные на сайте материалы, могут содержать информацию для пользователей старше 18 лет. </div>

                        <div class="col-sm-4 col-txt col-txt-2 text-right">
                            <div class="project-by-um">
                                © 2012 - 2018 <img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/svg/logo-ukr-media.svg" width="90" class="img-responsive" loading=lazy>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
                
            </noindex>
        </footer>
        
    </div>
    



    
    <div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="modal-searchLabel">
        <div class="modal-dialog modal-lg itc-container" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="modal-searchLabel">Поиск по сайту</h4>
                </div>
                <div class="modal-body">
                    <form role="search" method="get" class="form-search" id="modal-searchform" action="/">
                        <div class="form-group">
                            <input type="search" autocomplete="off" spellcheck="false" placeholder="Введите текст поиска" value="" name="s" id="modal-s" class="input-lg form-control">
                        </div>
                    </form>

                    <div class="modal-search-results"></div>
                </div>
            </div>
        </div>
    </div>
    <link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=4.9.1' type='text/css' media='all' />
    <link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css?ver=4.9.1' type='text/css' media='all' />

    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1513648647'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/themes/sk-Evrikak/js/modernizr-2.8.3.min.js?ver=4.9.1'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/visualizer/js/lib/clipboardjs/clipboard.min.js?ver=3.0.4'></script>

    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6.1'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6.1'></script>
    <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
    <script type='text/javascript'>
        /* <![CDATA[ */
        var thickboxL10n = {
            "next": "\u0414\u0430\u043b\u0435\u0435 \u2192",
            "prev": "\u2190 \u041d\u0430\u0437\u0430\u0434",
            "image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
            "of": "\u0438\u0437",
            "close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c",
            "noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.",
            "loadingAnimation": "http:\/\/battlecase.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif"
        };
        /* ]]> */
    </script>
    <script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script>
    <div id="mmenu_res" style="display:none;width:100%;height:40px;line-height:40px;background:#FD6A93;color:#FFFFFF;position:fixed;text-align:center;font-size:23px;;z-index:100000000">
        <a class="mmenu_open" href="#irevoltmenu">

<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
</a> Рубрики

    </div>



    

    

    
    <div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="modalAdLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                
                <div class="modal-body">
                    <div class="ad text-center">

                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
    </div>
    





    <link rel="stylesheet" href="/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.css">
    <script src="/assets/jquery1.cookie1.js"></script>
    <script src="https://battlecase.ru/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.js"></script>
</body>

</html>