Перенос длинных слов с помощью CSS. Переносы слов Css перенос длинных слов

Всем привет и приступим. Допустим у нас есть следующий текст:

Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом городе все самые новые технологии, основанные на последних достижениях науки и техники, пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских, автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе начнет функционировать служба автоматических летающих такси. И в рамках подготовки к этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами, который и будет использоваться в качестве такси, совершил первый полет в автоматическом режиме, пишут...

здесь у нас указан некий текст с которым мы сейчас начнем работать.

И первое свойство которое мы с вами рассмотрим называется word-break

word-break: normal | keep-all | break-all

Нас в основном интересуют два значения данного свойства normal - дефолтное значение и break-all с помощью которого мы устанавливаем что перенос слов осуществляется посимвольно. Что касается keep-all, то данное значение служит для переноса слов на китайском, японском и корейском языках.

P{ word-break: break-all;. }

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

К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap:

P{ overflow-wrap: break-word; }

и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:

overflow-wrap: normal | break-word | inherit;

Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.

Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.

По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту:

White-space: nowrap;

все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки.

White-space: pre;

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

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

White-space: pre-wrap;

Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!

Свойство 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 перенос слов, если они не влазят в свой контейнер. Я покажу вам все на реальном примере.

Включаем перенос для слов, которые не влезают

Допустим, у меня есть блок, шириной 100 пикселей и мне в него нужно написать какой-то текст. В тексте попадается слово «самораспаковывающийся «. Таким бывает архив, например) Но не суть. Слово очень длинное, оно просто не влезет в контейнер по ширине. Давайте его напишем в такой узкий блок (100 пикселей). Что будет?

Как видим, бедное слово вылезло за пределы контейнера, ну деваться ему некуда, что поделаешь. И это без отступов. Так вот, тут на помощь приходит свойство word-wrap. Вот что нужно задать блоку, чтобы включить перенос слов по буквам в нем:

Word-wrap: break-word;

А для убедительности можно прописать еще и внутренние отступы (padding). Итак, после применения свойства видим, что слишком длинные слова будут переноситься по буквам на другую строку. Причем, даже если второй строки не хватит для слова, то остальная его часть перенесется на третью и т.д.

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

В каких случаях использовать word-wrap

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

Итак, в этой статье мы узнали, как делать перенос слов в css. На этом у меня сегодня все. До встречи.

Свойство 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.
Пример


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

 X ⁿ
 + Y ⁿ =
 Z ⁿ

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

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

    </div>

</article> 







                              

                                
<div id="disqus_thread">
    </div>


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

            
            
	

<div class="col-md-4">
	    <div class="primary-sidebar widget-area" role="complementary">
    <div id="search-2" class="widget widget_search">
        <form role="search" method="get" class="search-form" action="/">
            <label>
					<span class="screen-reader-text">Найти:</span>
					<input type="search" class="search-field" placeholder="Поиск…" value="" name="s" />
				</label>
            <input type="submit" class="search-submit" value="Поиск" />
        </form>
    </div>
    <div id="recent-posts-2" class="widget widget_recent_entries"> <span class="widget-title">Свежие записи</span>
        <ul>
                             <li>
                    <a href="/programs/kak-strelyat-iz-sau-v-world-of-tanks-upravlenie-v-igre-world-of-tanks-vorld-of-tank.html">Управление в игре World of Tanks Ворлд оф танк управление клавиатурой</a>
                </li>
                             <li>
                    <a href="/browsers/nastraivaemoe-boevoe-menyu-dlya-wot-nastraivaemoe-boevoe-menyu-dlya-world-of-tanks.html">Настраиваемое боевое меню для World of Tanks Главное меню ворлд оф танк моды</a>
                </li>
                             <li>
                    <a href="/computer/otkroetsya-test-world-of-tanks-protestirui-novyi-dvizhok-kak-eto-rabotaet.html">Протестируй новый движок</a>
                </li>
                             <li>
                    <a href="/browsers/mir-tankov-premiumnye-tanki-luchshii-prem-tank-obzor-premiumnyh-tankov.html">Мир танков премиумные танки</a>
                </li>
                             <li>
                    <a href="/programs/vasha-karta-zablokirovana-chto-delat-esli-na-vash-telefon-prishlo-takoe.html">Мошенники: ваша карта заблокирована — что делать?</a>
                </li>
                             <li>
                    <a href="/video/detalizaciya-zvonkov-mts-vse-sposoby-polucheniya-raspechatki-zvonkov.html">Возможно ли получить распечатку звонков,СМС или детализацию счета?</a>
                </li>
                             <li>
                    <a href="/browsers/vypiska-po-schetu-v-sberbanke-kak-poluchit-besplatnaya-detalizaciya.html">Бесплатная детализация счета на мегафоне Кто может взять детализацию звонков</a>
                </li>
                             <li>
                    <a href="/video/chto-takoe-sistema-telebank-chto-takoe-sistema-telebank-sredi.html">• Что такое система «Телебанк Среди основных возможностей следует выделить</a>
                </li>
            
        </ul>
    </div>

    <div id="recent-posts-2" class="widget widget_recent_entries"> <span class="widget-title">Популярные записи</span>
        <ul>
                             <li>
                    <a href="/computer/podklyuchenie-fotorezistora-k-arduino-i-rabota-s-datchikom-osveshchennosti.html">Подключение фоторезистора к ардуино и работа с датчиком освещенности Подключение фоторезистора к ардуино нано</a>
                </li>
                             <li>
                    <a href="/browsers/usilitel-hi-fi-na-komplementarnyh-polevyh-tranzistorah.html">Усилитель Hi-Fi на комплементарных транзисторах</a>
                </li>
                             <li>
                    <a href="/computer/vch-usilitelya-moshchnosti-na-poloskovyh-liniyah-prostye-usiliteli.html">Простые усилители высокой частоты (УВЧ) для приемников</a>
                </li>
                             <li>
                    <a href="/browsers/mozhno-li-ispolzovat-cifrovoi-kabel-kak-mezhblochnyi-zanimatelnoe.html">Занимательное чтиво по кабелям</a>
                </li>
                             <li>
                    <a href="/programs/glushitel-sotovoi-svyazi-s-reguliruemoi-moshchnostyu-glushilki.html">Глушилки сотовых телефонов и устройств передачи данных</a>
                </li>
                             <li>
                    <a href="/windows-8/slezhenie-za-pochtovymi-perevodami-otslezhivanie-belpochta.html">Слежение за почтовыми переводами</a>
                </li>
                             <li>
                    <a href="/programs/chto-luchshe-aliekspress-ili-ebei-osobennosti-torgovyh-ploshchadok-v-chem-zhe.html">В чем же принципиальное отличие aliexpress и ebay?</a>
                </li>
                             <li>
                    <a href="/programs/pochemu-ne-prihodyat-posylki-pochemu-voobshche-ne-prihodyat-posylki-ot-aliekspress-gde.html">Почему вообще не приходят посылки от Алиэкспресс?</a>
                </li>
            
        </ul>
    </div>
    
    
    <div id="ai_widget-2" class="widget ai_widget">
        <div class='code-block code-block-5' style='margin: 8px 0; clear: both;'>
            
        </div>
    </div>
</div>
	</div>



	<div class="col-md-4">
	    <div class="primary-sidebar widget-area" role="complementary">
	        	    </div>
	</div>

        </div> 
    </div> 
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <hr>
            </div>
        </div>
    </div>
    

<footer class="site-footer" role="contentinfo">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
  
                    <p></p>

<div class="footer-social-icons">
    <a href="/feedback.html">Контакты</a> | <a href="/sitemap.xml">Карта сайта</a> </div>
                    
                    
                </div>
            </div>
        </div>
    </footer>



            <div class="scroll-up">
            <a href="#"><i class="fa fa-angle-up"></i></a>
        </div>
        

    <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script><script type='text/javascript' src='/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='/wp-content/themes/onlineelektrik/assets/js/bootstrap.min.js?ver=3.3.5'></script>
<script type='text/javascript' src='/wp-content/themes/onlineelektrik/assets/js/scripts.js'></script>
<script type='text/javascript' src='/wp-content/themes/onlineelektrik/assets/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='/wp-content/themes/onlineelektrik/assets/js/smoothscroll.js'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.4'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "shaped-blog-sidebar", "margin_top" : 10, "margin_bottom" : 1000, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['ai_widget-2'] } ;
</script>
<script type='text/javascript' src='/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.4'></script>





<script type='text/javascript' src='/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.8.4'></script>





<script type='text/javascript' src='/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.8.4'></script>
    </body>
</html>