Перенос на другую строку css. Как сделать в css перенос слов, которые не влазят в блок? В чём состоит различие одно свойства от другого

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

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

Обозначения

Значения

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

Пример

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

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

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

Объект .style.wordWrap

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

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

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

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

 , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
 имитирует работу 
Но в отличие от него не меняет шрифт на моноширинный.
Краткая информация
Обозначения

Описание
Пример

<тип>
Указывает тип значения.
<размер>

A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>

A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps

A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count


Группирует значения.
[ crop || cross ]

*
Повторять ноль или больше раз.
[,<время>]*

+
Повторять один или больше раз.
<число>+

?
Указанный тип, слово или группа не является обязательным.
inset?

{A, B}
Повторять не менее A, но не более B раз.
<радиус>{1,4}

#
Повторять один или больше раз через запятую.
<время>#

×
Значения
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление 

 переносит текст на новую строку. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку. 
Действие значений на текст представлено в табл. 1.
Пример


 
 
 
 
 
 
 
Пример
 

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

 X n
 + Y n =
 Z n

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

Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
Объект
.style.whiteSpace
Примечание
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line
 и pre-wrap
. Для  значения normal
 и pre
 ведут себя как pre-wrap
, а значение nowrap
 ведёт себя как pre-line
.</p><p>Opera до версии 9.5 не поддерживает значение pre-line
. Для <textarea>
 значения normal
 и pre
 ведут себя как pre-wrap
, а значение nowrap
 ведет себя как pre-line
.</p><p>В Firefox для <textarea>
 значения normal
, nowrap
, и pre
 воспринимаются как pre-wrap
.</p><h2>Спецификация</h2><p>Каждая спецификация проходит несколько стадий одобрения.</p><ul><li>Recommendation (Рекомендация
) - спецификация одобрена W3C и рекомендована как стандарт.</li><li>Candidate Recommendation (<span>Возможная рекомендация
</span>) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.</li><li>Proposed Recommendation (<span>Предлагаемая рекомендация
</span>) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.</li><li>Working Draft (Рабочий проект
) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.</li><li>Editor"s draft (<span>Редакторский черновик
</span>) - черновая версия стандарта после внесения правок редакторами проекта.</li><li>Draft (<span>Черновик спецификации
</span>) - первая черновая версия стандарта.</li>
</ul>×

<h3>Краткая информация</h3>
<h3>Версии CSS</h3>
<table class="cssver"><tr><th>CSS 1
</th>
 <th>CSS 2
</th>
 <th>CSS 2.1
</th>
 <th>CSS 3
</th>
</tr><tr><td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
</tr></table><h3>Описание</h3>
<p>Свойство white-space
 устанавливает, как отображать
 пробелы между словами. В обычных условиях любое количество пробелов в коде HTML
 показывается на веб-странице как один. Исключением является тег <pre>Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
 пользователем. Таким образом, white-space
 имитирует
 работу тега <pre>Но в отличие от него не меняет шрифт
 на моноширинный.</p>
<h3>Синтаксис</h3>
<p>white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit</p>
<h3>Значения</h3>
 normal
 Текст в окне браузера выводится как обычно, переносы строк устанавливаются
 автоматически.
 nowrap
 Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой;
 вместе с тем, добавление тега <br>
 переносит текст
 на новую строку.
 pre
 Текст показывается с учетом всех пробелов и переносов, как они были добавлены
 разработчиком в коде HTML.
 Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
 pre-line
 В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
 pre-wrap
 В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
 inherit
 Наследует значение родителя.
<p>Действие значений на текст представлено в табл. 1.</p>
<p>HTML5
CSS2.1
IE
Cr
Op
Sa
Fx
</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>white-space</title>
 <style>
 .example {
 border: 1px dashed #634f36; /* Параметры рамки */
 background: #fffff5; /* Цвет фона */
 font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
 padding: 7px; /* Поля вокруг текста */
 margin: 0 0 1em; /* Отступы */
 white-space: pre; /* Учитываются все пробелы и переносы */
 }
 .exampleTitle {
 border: 1px solid black; /* Параметры рамки */
 border-bottom: none; /* Убираем линию снизу */
 padding: 3px; /* Поля вокруг текста */
 display: inline; /* Отображать как встроенный элемент */
 background: #efecdf; /* Цвет фона */
 font-weight: bold; /* Жирное начертание */
 font-size: 90%; /* Размер шрифта */
 margin: 0; /* Убираем отступы */
 white-space: nowrap; /* Переносов в тексте нет */
 }
 </style>
 </head>
 <body>
 <p class="exampleTitle">Пример</p>
 <p class="example">
 <html>
 <body>
 <b>Великая теорема Ферма</b><br>
 <i>X <sup><small>n</small></sup>
 + Y <sup><small>n</small></sup> =
 Z <sup><small>n</small></sup></i><br>
 где n - целое число > 2
 </body>
 </html>
 </p>
 </body>
</html>
</p><p>Результат данного примера показан на рис. 1.</p>
<p>Рис. 1. Применение свойства white-space</p>
<h3>Объектная модель</h3>
<p>document.getElementById("elementID
").style.whiteSpace</p>
<h3>Браузеры</h3>
<p>Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line
, pre-wrap
 и inherit
. Для <textarea></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>Всем привет). Я продолжаю писать о различных <a href="/poleznye-svoistva-kefira-i-ego-protivopokazaniya-kefir-polza-i/">полезных свойствах</a> языка css, которые так или иначе могут помочь при верстке. И сегодня я хочу рассказать, как делать в css перенос слов, если они не влазят в свой контейнер. Я покажу вам все на реальном примере.</p>
 <h2>Включаем перенос для слов, которые не влезают</h2>
 <p>Допустим, у меня есть блок, шириной 100 пикселей и мне в него нужно написать какой-то текст. В тексте попадается слово «<i>самораспаковывающийся
</i>«. Таким бывает архив, например) Но не суть. Слово очень длинное, оно просто не влезет в контейнер по ширине. Давайте его напишем в такой узкий блок (100 пикселей). Что будет?</p><p>Как видим, бедное слово вылезло за пределы контейнера, ну деваться ему некуда, что поделаешь. И это без отступов. Так вот, тут на помощь приходит свойство word-wrap. Вот что нужно задать блоку, чтобы включить перенос слов по буквам в нем:</p>
 <p>Word-wrap: break-word;</p>
 <p>А для убедительности можно прописать еще и внутренние отступы (padding). Итак, после применения свойства видим, что слишком длинные слова будут переноситься по буквам на другую строку. Причем, даже если второй строки не хватит для слова, то остальная его часть перенесется на третью и т.д.<br><br>
 Хочу отметить, что свойство можно без опасений использовать. Во-первых, сегодня оно отлично работает в браузерах. Во-вторых, оно работает по умному. А именно, для всех нормальных слов никаких переносов не будет, переноситься будут слова целиком на следующую строчку, поэтому читабельность не нарушится. Вы можете увидеть это на этом скрине.</p>
 <h2>В каких случаях использовать word-wrap</h2>
 <p>Собственно, пока я вижу 2 варианта использования. Первый — как раз для узких блоков, где вы опасаетесь, что длинные слова могут некрасиво вылезти за границы блока. Второй — это когда дизайнер задумал так, чтобы название сайта было в несколько строк.</p>
 <p>Итак, в этой статье мы узнали, как делать перенос слов в css. На этом у меня сегодня все. До встречи.</p>
<p>Влад Мержевич</p>
 <p>В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на <a href="/gde-naiti-draivera-dlya-monitora-gde-vzyat-i-kak-ustanovit-draiver-na/">разных мониторах</a>, с разным разрешением, в разных <a href="/kakie-operacionnye-sistemy-sushchestvuyut-dlya-pk-spisok-naibolee/">операционных системах</a> и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или <a href="/otsutstvuet-centr-obnovleniya-windows-10-vklyuchenie-cherez-redaktor/">автоматических способов</a> добавления переносов не так уж и много, так что перечислю все.</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>
 - не виден в <a href="/pravila-oformleniya-teksta-postranichnoi-snoski-dobavlenie-obychnyh-i/">обычном тексте</a> и переносит слово на другую строку, при этом добавляя дефис (пример 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://i2.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://i0.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>И, наконец, самое мощное и удобное свойство для <a href="/gruppa-dlya-nabora-druzei-programma-dlya-avtomaticheskogo/">автоматического добавления</a> переносов - 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://i0.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 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на <a href="/instrukciya-kak-v-vorde-sdelat-nerazryvnyi-probel-probelnye/">неразрывный пробел</a> (пример 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>В <a href="/1-odf-lichnyi-kabinet-podklyuchenie-novyh-kass-a-kak-ya-uznayu-chto/">данном примере</a> для корректного написания координат используется , который не позволяет переносить текст.</p>

<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<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>  
</article>
</div>
<div class="full-place" data-place="article_before_social" data-priority="0" style="width: 100%;"></div>
<div class="single-share">
    <div class="single-share__top">
        <div class="single-share__title">Понравилась статья? <span>Поделитесь с друзьями!</span>
        </div>
        <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?url=https%3A%2F%2Fmttx.ru%2Fperenos-na-druguyu-stroku-css-kak-sdelat-v-css-perenos-slov-kotorye-ne%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share__facebook">
<i class="fa fa-facebook-official"></i>
<span>Поделиться в <b>Facebook</b>
</span>
</a>
    </div>
    <div class="single-share__bottom">
        <div class="single-share__group">
            <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2Fmttx.ru%2Fperenos-na-druguyu-stroku-css-kak-sdelat-v-css-perenos-slov-kotorye-ne%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--vk">
<i class="fa fa-vk single-share-links-item__icon"></i>
<span class="single-share-links-item__text"></span>
</a>
            <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2Fmttx.ru%2Fperenos-na-druguyu-stroku-css-kak-sdelat-v-css-perenos-slov-kotorye-ne%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--tw">
<i class="fa fa-twitter single-share-links-item__icon"></i>
<span class="single-share-links-item__text">Twitter</span>
</a>


        </div>
        <div class="single-share__group">
            <a href="#" onclick="window.print();" class="single-share-item single-share-item--print"><i class="fa fa-print single single-share-item__icon"></i><span>распечатать</span>
</a>
        </div>
    </div>
</div>
<div class="article-user">
<div class="article-user-item article-user-question">
<div class="article-user-item__title">Была ли эта статья полезной?</div>
<div class="article-user-item__bottom">
<div id="js-send-positive-rating" class="article-user-item__button _yes">Да</div>
<div class="article-user-item__button _no">Нет</div>

</div>
</div>
<div id="js-success-send-form" class="article-user-item article-user-question _yes _hidden">
<div class="article-user-item__title">Спасибо, за Ваш отзыв!</div>
<div class="article-user-item__text"></div>

</div>
<div id="js-fail-send-form" class="article-user-item _no _hidden">
<div class="article-user-item__title">Что-то пошло не так и Ваш голос не был учтен.</div>
</div>
<div id="js-negative-rating-form" class="article-user-item article-user-question _no _hidden">
<div class="article-user-item__title">Спасибо. Ваше сообщение отправлено</div>
</div>
<div class="article-user-item article-user-error">
<div class="article-user-item__title">Нашли в тексте ошибку?</div>
<div class="article-user-item__text">Выделите её, нажмите <strong>Ctrl + Enter</strong> и мы всё исправим!</div>
</div> </div>
<div class="full-place" data-place="article_before_related_articles" data-priority="0" style="width: 100%;"></div>
<div class="similar-articles">
<div class="similar-articles__title">
<i class="fa fa-angle-double-left"></i>Похожие советы<i class="fa fa-angle-double-right"></i>
</div>
<div class="block-row">
     <div class="block-column _triple">
        <div class="similar-articles-block">
            <div class="similar-articles-block__image">
                <img src="/uploads/1dc63577943143c4879b909d64c0645d.jpg" alt="Что означают буквы«мм»: все возможные значения В контакте русская версия" loading=lazy>
            </div>
            <a href="/v-kontakte-chto-oznachayut-bukvy-mm-vse-vozmozhnye-znacheniya-v-kontakte/" title="Что означают буквы«мм»: все возможные значения В контакте русская версия" class="similar-articles-block__title">
Что означают буквы«мм»: все возможные значения В контакте русская версия </a>
        </div>
    </div>
 <div class="block-column _triple">
        <div class="similar-articles-block">
            <div class="similar-articles-block__image">
                <img src="/uploads/370cb7ff1f7e9bde457c05f9d12bee36.jpg" alt="Электронные самоделки для радиолюбителей и начинающих электриков" loading=lazy>
            </div>
            <a href="/kakie-pribory-mozhno-sdelat-svoimi-rukami-elektronnye-samodelki-dlya/" title="Электронные самоделки для радиолюбителей и начинающих электриков" class="similar-articles-block__title">
Электронные самоделки для радиолюбителей и начинающих электриков </a>
        </div>
    </div>
 <div class="block-column _triple">
        <div class="similar-articles-block">
            <div class="similar-articles-block__image">
                <img src="/uploads/63f9d484568216eb8915ccb8181a9050.jpg" alt="Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003" loading=lazy>
            </div>
            <a href="/sbros-do-zavodskih-nastroek-hard-reset-dlya-telefona-samsung-galaxy-s-sclcd-gt-i9003-samsung/" title="Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003" class="similar-articles-block__title">
Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003 </a>
        </div>
    </div>

     
     
</div>
<div class="block-row">
             <div class="block-column _triple">
            <div class="similar-articles-block">
                <div class="similar-articles-block__image">
                    <img src="/uploads/54e09bf1f0920d9e135a9e50c00092f5.jpg" alt="Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек" loading=lazy>
                </div>
                <a href="/sbros-do-zavodskih-nastroek-hard-reset-dlya-telefona-samsung-galaxy-s-sclcd-gt-i9003-samsung/" title="Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек" class="similar-articles-block__title">
Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек </a>
            </div>
        </div>
             <div class="block-column _triple">
            <div class="similar-articles-block">
                <div class="similar-articles-block__image">
                    <img src="/uploads/ece27e98c2e58fb06b6f1d2acc2b790f.jpg" alt="Что делать, если телефон сам перезагружается" loading=lazy>
                </div>
                <a href="/smartfon-perezagruzhaetsya-pri-zaryadke-chto-delat-esli-telefon-sam/" title="Что делать, если телефон сам перезагружается" class="similar-articles-block__title">
Что делать, если телефон сам перезагружается </a>
            </div>
        </div>
             <div class="block-column _triple">
            <div class="similar-articles-block">
                <div class="similar-articles-block__image">
                    <img src="/uploads/c277df224897c5ce57d42d69afbaab78.jpg" alt="Телефон Android не включается дальше логотипа (не хочет загружаться)" loading=lazy>
                </div>
                <a href="/pochemu-planshet-ne-vklyuchaetsya-android-telefon-android-ne-vklyuchaetsya/" title="Телефон Android не включается дальше логотипа (не хочет загружаться)" class="similar-articles-block__title">
Телефон Android не включается дальше логотипа (не хочет загружаться) </a>
            </div>
        </div>
    
    
    
</div>
</div>
<div class="full-place" data-place="article_after_related_articles" data-priority="0" style="width: 100%;"></div>
<div class="comments">
<div id="mc-container"></div>
</div>





</article>


<aside class="sidebar hide-on-mobile">
    <div class="day-sovet">
        <h3 class="day-sovet__hd">Тема дня</h3>
        <div class="day-sovet__box">
    <img src="/uploads/323a0b2e05c870f6aa64024a67f37b43.jpg" alt="Процедура отключения обновления в Mozilla Как убрать обновление фаерфокс" class="day-sovet__image" loading=lazy>
    <a href="/category/mts/" class="day-sovet__category">
<span>Мтс</span>
</a>
</div>
        <a href="/kak-otkatit-firefox-na-predydushchuyu-versiyu-procedura-otklyucheniya/" class="day-sovet__link">
<span>Процедура отключения обновления в Mozilla Как убрать обновление фаерфокс</span>
</a>
    </div>
<!-- /next_post -->
<div class="vk-widget">
    <h3 class="vk-widget__hd">Реклама</h3>

    <div id="pypase1" style="height:400px;width:298px;" align="center"></div>

</div>
<div class="popular-articles">
    <h3 class="black-hd popular-articles__title">Популярные материалы</h3>
         <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/gadzhety-dlya-windows-10-regulirovka-gromkosti-programmy-dlya/" class="">
<img src="/uploads/8aebb6ca9def8f3e8e5300bcc335bff6.jpg" alt="Программы для настройки звука" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/gadzhety-dlya-windows-10-regulirovka-gromkosti-programmy-dlya/" class="row-gui__link">
<span>Программы для настройки звука</span>
</a>
            </div>
        </div>
    </div>
     <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/televizor-samsung-v-kachestve-monitora-plyusy-i-minusy-ispolzovaniya-televizora-vmesto-monitora-podk/" class="">
<img src="/uploads/a57cdf20117bde438f194dd215a0f75e.jpg" alt="Плюсы и минусы использования телевизора вместо монитора" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/televizor-samsung-v-kachestve-monitora-plyusy-i-minusy-ispolzovaniya-televizora-vmesto-monitora-podk/" class="row-gui__link">
<span>Плюсы и минусы использования телевизора вместо монитора</span>
</a>
            </div>
        </div>
    </div>
     <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/programma-dlya-vyyavleniya-neispravnostei-operativnoi-pamyati-kak-vypolnit/" class="">
<img src="/uploads/1d22d20477bc0866a7ea7e57b6e0554e.jpg" alt="Как выполнить тест оперативной памяти?" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/programma-dlya-vyyavleniya-neispravnostei-operativnoi-pamyati-kak-vypolnit/" class="row-gui__link">
<span>Как выполнить тест оперативной памяти?</span>
</a>
            </div>
        </div>
    </div>
     <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/pervyi-kanal-hd-smotret-onlain-kommentarii-pervyi-kanal-8023/" class="">
<img src="/uploads/159d0d478179616fa22cf8b3fe1760dc.jpg" alt="Комментарии Первый канал (8023) Идет орт" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/pervyi-kanal-hd-smotret-onlain-kommentarii-pervyi-kanal-8023/" class="row-gui__link">
<span>Комментарии Первый канал (8023) Идет орт</span>
</a>
            </div>
        </div>
    </div>
     <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/ustanovka-trikolor-tv-v-shchekino-ustanovka-trikolor-tv-v-shchekino/" class="">
<img src="/uploads/81e27754520e0fa020cee275ba63d5d5.jpg" alt="Установка триколор тв в щекино Установка и подключение" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/ustanovka-trikolor-tv-v-shchekino-ustanovka-trikolor-tv-v-shchekino/" class="row-gui__link">
<span>Установка триколор тв в щекино Установка и подключение</span>
</a>
            </div>
        </div>
    </div>
     <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/interferenciya-solnechnaya-solnechnaya-zasvetka-sputnikovaya-svyaz/" class="">
<img src="/uploads/3764d8ca53a703cf2cf539e95647e3a6.jpg" alt="Интерференция солнечная. Солнечная засветка. Спутниковая связь. Как определить время солнечной интерференции Особенности работы с калькулятором" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/interferenciya-solnechnaya-solnechnaya-zasvetka-sputnikovaya-svyaz/" class="row-gui__link">
<span>Интерференция солнечная. Солнечная засветка. Спутниковая связь. Как определить время солнечной интерференции Особенности работы с калькулятором</span>
</a>
            </div>
        </div>
    </div>
     <div class="popular-articles__item">
        <div class="row-gui">
            <div class="row-gui__image">
                <a href="/moya-strana-tele2-opisanie-opisanie-uslugi-moya-strana-ot-tele2-stoimost/" class="">
<img src="/uploads/c54d263909c2977eccda3b3f33e85719.jpg" alt="Описание услуги «Моя страна» от Теле2" loading=lazy> </a>
            </div>
            <div class="row-gui__content">
                <a href="/moya-strana-tele2-opisanie-opisanie-uslugi-moya-strana-ot-tele2-stoimost/" class="row-gui__link">
<span>Описание услуги «Моя страна» от Теле2</span>
</a>
            </div>
        </div>
    </div>

                </div>
</aside>


</div>
<div class="full-place" data-place="article_desktop_fixed" data-priority="0" style="width: 100%;"></div>


<footer class="footer">
    <div class="footer__wrapper">
        <div class="footer__box">
            <a href="/" class="footer__logo1"><img src="/logo/logo.png" loading=lazy></a><br>
            <div class="social-buttons">
                <div class="social-buttons-list">
                    <a href="https://vk.com/share.php?url=https://mttx.ru/perenos-na-druguyu-stroku-css-kak-sdelat-v-css-perenos-slov-kotorye-ne/" class="social-buttons-list__item _vk">Vkontakte</a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https://mttx.ru/perenos-na-druguyu-stroku-css-kak-sdelat-v-css-perenos-slov-kotorye-ne/" class="social-buttons-list__item _fb">Facebook</a>
                </div>
            </div>
            <p class="footer__copyright">© 2024. Энциклопедия мобильной связи</p>
        </div>
        <nav class="footer-menu">
                            <a class="footer-menu__item" href="/category/beeline/">Билайн</a>
                            <a class="footer-menu__item" href="/category/yota/">Йота</a>
                            <a class="footer-menu__item" href="/category/tele2/">Теле2</a>
                            <a class="footer-menu__item" href="/category/mts/">Мтс</a>
                            <a class="footer-menu__item" href="/category/megaphone/">Мегафон</a>
            
        </nav>
        <div class="footer__counters">
        </div>
    </div>
</footer>


<div class="scroll-up">
<div id="toTop"><span class="up_b"></span>Наверх</div>
</div>
<div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div>
<div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div>
<script data-rocketsrc="/assets/sovets24-2017/js/app-20171130102046.js" type="text/rocketscript"></script>
<script type="text/rocketscript">

    if(window.location.hostname.indexOf('hghltd.yandex.net')!=-1){ // hghltd.yandex.net
        var i;
        var x = document.getElementsByClassName("direct");
        for (i = 0; i < x.length; i++) { 
            x[i].style.display = "none";
        } 
    } 

    (function(H){ H.className=H.className.replace(/\bno-js\b/,'js')} )(document.documentElement);

</script>
<script type="text/rocketscript">
        APP.pages.articleView();
        APP.modules.ratingBlock.init();
        Engine.article.errorInTextReport();
        document.oncopy = Engine.addLinkOnCopy;
    </script>
<script type="text/rocketscript">
    var BANNERS = { 
        types: { 
            code: 1,
            consultant: 6,
            modal: 9,
            offer: 7        } 
    } 
</script>
</body>
</html>