Автоматический топорный перенос слов (без добавление дефисов).

Интересуемые значения свойства:

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

Светлое будущее. СSS cвойство hyphens

Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.

Интересуемые значения:

• manual (используется по умолчанию)
  Слова переносятся только в тех местах текста, где добавлен спецсимвол ­ (мягкий перенос) или тег . Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол ­ при переносе слова добавлять дефис (как учили в школе), а тег нет.
• auto
  Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.

...

Программиирование - процесс и искусство создания компьютерных программ с помощью языков програм­мирования.

p { hyphens: auto; }

Запрет переносов

Существует обратная задача - запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел  

Также у CSS свойства hyphens существует значеие none , когда слова не переносятся, даже при наличии в тексте мягких переносов.

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

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

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

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

 

 
 
 
 
 
 
 
Пример
 

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

 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>
<p>Свойство white-space
 устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre> , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
 имитирует работу <pre>Но в отличие от него не меняет шрифт на моноширинный.</p><h2>Краткая информация</h2><h2>Обозначения</h2><table><tbody><tr><th>
</th><th>Описание
</th><th style="width: 130px">Пример
</th>
</tr><tr><td><тип>
</td><td>Указывает тип значения.
</td><td><размер>
</td>
</tr><tr><td>A && B
</td><td>Значения должны выводиться в указанном порядке.
</td><td><размер> && <цвет>
</td>
</tr><tr><td>A | B
</td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B).
</td><td>normal | small-caps
</td>
</tr><tr><td>A || B
</td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
</td><td>width || count
</td>
</tr><tr><td>
</td><td>Группирует значения.
</td><td>[ crop || cross ]
</td>
</tr><tr><td>*
</td><td>Повторять ноль или больше раз.
</td><td>[,<время>]*
</td>
</tr><tr><td>+
</td><td>Повторять один или больше раз.
</td><td><число>+
</td>
</tr><tr><td>?
</td><td>Указанный тип, слово или группа не является обязательным.
</td><td>inset?
</td>
</tr><tr><td>{A, B}
</td><td>Повторять не менее A, но не более B раз.
</td><td><радиус>{1,4}
</td>
</tr><tr><td>#
</td><td>Повторять один или больше раз через запятую.
</td><td><время>#
</td>
</tr></tbody></table>×
<h2>Значения</h2><p>normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br>
 переносит текст на новую строку. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку. </p><p>Действие значений на текст представлено в табл. 1.</p><h2>Пример</h2><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><h2>Объектная модель</h2><p><i>Объект
</i>.style.whiteSpace</p><h2>Примечание</h2><p>Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line
 и pre-wrap
. Для <textarea>
 значения 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>×


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

	<footer class="entry-meta entry-footer">
		
			<div class="addthis_toolbox"><span class="p3_share_title">Поделиться </span><a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2F130km.ru%2Flessons-on-windows%2Fcss-perenos-dlinnoi-stroki-perenosy-slov-v-html-vklyuchaem%2F" target="_blank" ><i class="fa fa-facebook"></i></a><a href="https://twitter.com/share?url=https%3A%2F%2F130km.ru%2Flessons-on-windows%2Fcss-perenos-dlinnoi-stroki-perenosy-slov-v-html-vklyuchaem%2F&text=Css+%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81+%D0%B4%D0%BB%D0%B8%D0%BD%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8.+%D0%9F%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81%D1%8B+%D1%81%D0%BB%D0%BE%D0%B2+%D0%B2+HTML"
    target="_blank" ><i class="fa fa-twitter"></i></a><i class="fa fa-pinterest"></i></div>
						
															
														
		
	</footer>

</article>
				<nav id="nav-below" class="clearfix post-navigation">
	
		

        <div class="nav-previous"><a href="/browsing-the-internet/oblako-live-com-obzor-onedrive-preimushchestva-nedostatki-chto-eto-za/" rel="prev"><span class="meta-nav"><i class="fa fa-chevron-left"></i> Обзор OneDrive: преимущества, недостатки, что это за программа</span> Облачное хранилище...</a></div>

		

        <div class="nav-next"><a href="/lessons-on-windows/sistema-modelirovaniya-isis-proteus-bystryi-start-simulyaciya-raboty-mikrokontrollerov-proteus-obuchen/" rel="next"><span class="meta-nav">Система моделирования ISIS Proteus <i class="fa fa-chevron-right"></i></span> Proteus

 – это...</a></div>


	
	</nav>
	
			



		
		</div>

			
	



<div class="col-sm-4 site-sidebar nopin" role="complementary">
		

<aside id="pipdig_widget_profile-2" class="widget pipdig_widget_profile">
    <div class="nopin"><img src="https://i0.wp.com/habrastorage.org/getpro/habr/post_images/742/b9a/0ec/742b9a0ec682bcf1bf6de4585a12e752.png" alt="Удобный интернет-магазин программного обеспечения для Windows" style="-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;" / loading=lazy></div>
    
        <p>Программы удаленного управления компьютером позволяют дистанционно управлять другим компьютером через Интернет или в локальной сети. Это удобно, когда необходимо помочь не очень опытному пользователю,... <br /><a href="/lessons-on-windows/udalennoe-upravlenie-po-seti-udobnyi-internet-magazin-programmnogo/"> Удобный интернет-магазин программного обеспечения для Windows</a></p>
    
</aside>

<aside id="pipdig_widget_social_icons-2" class="widget pipdig_widget_social_icons"><div class="socialz"><a href="" target="_blank"><i class="fa fa-instagram"></i></a><a href="https://www.facebook.com/sharer/sharer.php?u=https://130km.ru/lessons-on-windows/css-perenos-dlinnoi-stroki-perenosy-slov-v-html-vklyuchaem/" target="_blank"><i class="fa fa-facebook"></i></a>
  <a href="https://vk.com/share.php?url=https://130km.ru/lessons-on-windows/css-perenos-dlinnoi-stroki-perenosy-slov-v-html-vklyuchaem/" target="_blank"><i class="fa fa-vk"></i></a></div></aside><aside id="search-2" class="widget widget_search">
    <form role="search" method="get" class="search-form" action="/search/">
        <div class="form-group">
            <input type="search" class="form-control" placeholder="Поиск" value="" name="s" title="Поиск по сайту Полезные хитрости по работе на компьютере">
        </div>
    </form>
</aside><aside id="text-6" class="widget widget_text">
    <div class="textwidget">
  
  </div>
</aside><aside id="text-9" class="widget widget_text"><h3 class="widget-title">Рекомендую</h3>			<div class="textwidget">
    
</div>
		</aside>	</div>




	

	</div>

		</div>
	</div>
	
	
	<div class="hide-back-to-top"><div id="back-top"><a href="#top"><i class="fa fa-chevron-up"></i></a></div></div>

		
		
		
			

<div class="clearfix extra-footer-outer social-footer-outer">
  <div class="container">
    <div class="row social-footer">
    <div class="col-sm-3">
<a href="" target="_blank" >
  <i class="fa fa-address-card-o"></i> О сайте</a>
</div>
    <div class="col-sm-3">
      <a href="/feedback/" target="_blank" >
        <i class="fa fa-envelope-o"></i>
        Контакты
      </a>
    </div>
    <div class="col-sm-3">
      <a href="" target="_blank" >
        <i class="fa fa-credit-card-alt"></i>
        Реклама
      </a>
    </div>
      <div class="col-sm-3">
    <a href="mailto:info@130km.ru" target="_blank" >
      <i class="fa fa-plus"></i>
      Написать нам 
        </a>
      </div>
    </div>	
</div>
</div>


<style scoped>#instagramz{ margin-top:0} </style>	
		
				<div class="clearfix"></div>
			
			<div class="clearfix"></div>
				
	

<footer class="site-footer">
		<div class="clearfix container">
			<div class="row">
								<div class="col-sm-6 site-info">
    © 2024 <a href="/">Полезные хитрости по работе на компьютере</a>
</div>
				
				<div class="col-sm-6 site-credit">
  
</div>
			</div>
		</div>
	</footer>


	
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<script type='text/javascript' src='/assets/scripts.js'></script>



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



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

		<style>
		.p3_pin_wrapper .left { left:0px} 
		.p3_pin_wrapper .right { right:0px} 
		.p3_pin_wrapper .bottom { bottom:0px} 
		.p3_pin_wrapper .top { top:0px} 
		</style>
		<script>
		(function( $ ){ 
			$.fn.imgPin = function( options ) { 

			var defaults = { 
				pinImg : 'https://pipdigz.co.uk/p3/img/pin/white_josefin.png',
				position: 'center',
			} ;
			var options = $.extend( { }, defaults, options );

			var url = encodeURIComponent(document.URL),
				pinImg = options.pinImg,
				position = '';

			this.each(function(){ 
				var src = $(this).attr('src');
				var shareURL = $(this).data('p3-pin-link');
				// if data attribute not found
				if (typeof shareURL == 'undefined') { 
					shareURL = window.location.href;
				} 
				// account for floats
				var pin_positon = '';
				if ($(this).hasClass('alignleft')) { 
					var pin_positon = 'pin_align_left';
				} else if ($(this).hasClass('alignright')) { 
					var pin_positon = 'pin_align_right';
				} else if ($(this).hasClass('aligncenter')) { 
					var pin_positon = 'pin_align_center';
				} 
				
				var img = new Image();
				img.src = src;

				var description = $(this).data('p3-pin-title'),
					imgURL = encodeURIComponent(src);
					
				if (description == null){ 
					var description = $(this).attr("alt");
				} 

				var link = 'https://www.pinterest.com/pin/create/button/';
					link += '?url='+shareURL;
					link += '&media='+imgURL;
					link += '&description='+description;

				$(this).wrap('<div class="p3_pin_wrapper_outer '+pin_positon+'"><div class="p3_pin_wrapper">').after('<a href="'+link+'" class="pin center"><img src="'+pinImg+'" alt="Pin this image on Pinterest"/ loading=lazy></a>');

								var img = new Image();
				img.onload = function() { 
					var w = this.width;
					h = this.height;
					$('.p3_pin_wrapper .pin.center').css('margin-left', -w/2).css('margin-top', -h/2);
				} 
				img.src = pinImg;
				
				//set click events
				$('.p3_pin_wrapper .pin').click(function(){ 
				var w = 700, h = 400;
				var left = (screen.width/2)-(w/2);
				var top = (screen.height/2)-(h/2);
				var imgPinWindow = window.open(this.href,'imgPngWindow', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=700, height=400');
				imgPinWindow.moveTo(left, top);
				return false;
				} );

			} );

			} 
			
		} )(jQuery);

		jQuery('.entry-content p img:not(.wp-smiley, .nopin, .nopin img), .entry-content .alignnone, .entry-content .aligncenter, .wp-post-image:not(.attachment-shop_catalog), .pipdig_left img, .pipdig_left img, .entry-content .separator img, .entry-summary img:not(.pipdig_p3_related_posts img, .pipdig-grid-post img)').imgPin();

		</script>
			<script>	
	jQuery(document).ready(function($) { 
		$(window).scroll(function() { 
			 if($(window).scrollTop() + $(window).height() == $(document).height()) { 
				$("#cookie-law-bar,#cookie-law-info-bar,.cc_container,#catapult-cookie-bar,.mailmunch-scrollbox,#barritaloca,#upprev_box,#at4-whatsnext,#cookie-notice,.mailmunch-topbar,#cookieChoiceInfo,.sumome-scrollbox-popup,.tplis-cl-cookies,#eu-cookie,.pea_cook_wrapper,#milotree_box").css('opacity', '0').css('visibility', 'hidden');
			 } else { 
				$("#cookie-law-bar,#cookie-law-info-bar,.cc_container,#catapult-cookie-bar,.mailmunch-scrollbox,#barritaloca,#upprev_box,#at4-whatsnext,#cookie-notice,.mailmunch-topbar,#cookieChoiceInfo,.sumome-scrollbox-popup,.tplis-cl-cookies,#eu-cookie,.pea_cook_wrapper,#milotree_box").css('opacity', '1').css('visibility', 'visible');
			 } 
		} );
	} );
	</script>
	
	<script>
jQuery(document).ready(function($) { 
	$(function(){ 
		$('.site-menu .menu').slicknav({ 
			label: '<i class="fa fa-bars"></i>',
			duration: 450,
			brand: '',
			closedSymbol: '<i class="fa fa-chevron-right"></i>',
			openedSymbol: '<i class="fa fa-chevron-down"></i>',
		} );
	} );
} );
</script>
</body>
</html>