Перенос слов css: word-wrap | htmlbook.ru

Leave a Comment / Css / By /

Перенос слов в CSS

Блог / Танцы с CSS / Перенос слов в CSS

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и небольшие хитрости рассмотрим в данной статье.

Разбивка и перенос длинных слов.

Допустим, в нашем ограниченном по ширине контейнере, необходимо учесть такую коллизию как длинный текст.


[пример 1]

На картинке мы видим, что текст вылазит за границу контейнера (элемента DIV). Для него написаны следующие свойства:

div {     width: 150px;     height: 100px;     padding: 10px;     background-color: #00f000; }

1

2

3

4

5

6

div {

    width: 150px;

    height: 100px;

    padding: 10px;

    background-color: #00f000;

}

Если мы применим к нему дополнительно стиль

overflow: hidden;

overflow: hidden;

то информация, выходящая за границы будет просто обрезана. А нам нужен перенос.

Для указания, что в данном случае нам нужен перенос, воспользуемся word-wrap. По-умолчанию, значение этого свойства — normal, это соответствует случаю в примере 1. Давайте установим для него следующие значение:

div { …     word-wrap: break-word; }

div {

    …

    word-wrap: break-word;

}


[пример 2]

Так мы достигаем желаемого результата — переноса длинного слова. Перенос выполняется с учетом внутренних отступов (

padding).

Перенос слов не по границе слов.

Если бы мы наш пример разбавили пробелами, то задавать значение word-wrap не пришлось бы, т.к. браузер автоматически выполняет нужные переносы. То есть вот так:


[пример 3]

То как происходит разбивка управляется свойством CSS word-break. В примере 3 его значение установлено по умолчанию, оно соответствует вот такой установке:

div {     …  word-break: keep-all; /* или normal */ }

div {

    …

    word-break: keep-all; /* или normal */

}

Т.е. разбивка текста производится на границе слов. Но мы можем заставить браузер разбивать фразу в любом месте предложения:

div {     …  word-break: break-all; }

div {

    …

    word-break: break-all;

}


[пример 4]

Благодаря такой разбивке предложение испытало перенос посреди слова «Constant».

Специальные «непереносимые» пробелы.

Возникают ситуации, когда нужно запретить перенос слов, но и пробелы между словами оставить.

Для этого случая в HTML существует спец символ — Non-breakable-SPace — « ». Если в третьем примере мы заменим все пробелы данным символом, то получим похожую на пример № 1 картинку:


[пример 5]

HTML код последнего примера:

<div >     very&nbsp;Long&nbsp;Word&nbsp;Or&nbsp;Constant<br />     3.14159&nbsp;26535&nbsp;89793&nbsp;23846&nbsp;26433&nbsp;83279&nbsp;50288&nbsp;41971 </div>

<div >

    very&nbsp;Long&nbsp;Word&nbsp;Or&nbsp;Constant<br />

    3.14159&nbsp;26535&nbsp;89793&nbsp;23846&nbsp;26433&nbsp;83279&nbsp;50288&nbsp;41971

</div>

Написать комментарий

Данная запись опубликована в 28. 03.2016 16:10 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.

 

Комментарии к «Перенос слов в CSS»

Понравилась статья? Есть вопросы? — пишите в комментариях.

Свойство word-break | CSS справочник

CSS свойства

Определение и применение

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

CJK, так и не-CJK текст(Китайский, Японский, Корейский).

Поддержка браузерами

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
word-break4.015.015. 03.15.512.0

CSS синтаксис:

word-break:"normal | break-all | keep-all | initial | inherit";

JavaScript синтаксис:

object.style.wordBreak = "normal"

Значения свойства

ЗначениеОписание
normalДопускается переносить слова только в допустимых точках.
Это значение по умолчанию.
break-allРазрыв слов для не-CJK текста может прерываться между любыми двумя буквами.
keep-allРазрыв слов не разрешён для CJK текста. Разрыв слов для не-CJK текста происходит так же, как при значении normal (в допустимых точках).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример переноса слов и иероглифов в CSS</title>
<style> 

 
 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
background: azure;  /* устанавливаем цвет заднего фона */
border: 1px solid gray;  /* устанавливаем сплошную границу размером 1 пиксель серого цвета */
} 
.test {
width: 240px; /* устанавливаем ширину блока */
word-break: normal;  /* допускается переносить слова только в допустимых точках (значение по умолчанию) */
margin-right: 150px;  /* устанавливаем внешний отступ справа */
} 
.test2 {
width: 250px; /* устанавливаем ширину блока */
word-break: break-all;  /* разрыв слов для не-CJK текста может прерываться между любыми двумя буквами */
margin-right: 150px;  /* устанавливаем внешний отступ справа */
} 
. test3
  {
width: 150px; /* устанавливаем ширину блока */
word-break: keep-all;  /* разрыв слов не разрешён для CJK текста. Разрыв слов для не-CJK текста происходит так же, как при значении normal (в допустимых точках) */
margin-top: 10px;  /* устанавливаем внешний отступ сверху */
} 
</style>
</head>
	<body>
		<div class = "test">
			<p><b>Блок со значением normal</b></p>
			Как говорится: 酒を飲むと打ち解けて来る<br>
			Что в переводе с японского означает: "когда_пьешь_сакэ,_становишься_откровенным". 
		</div>
		<div class = "test2">
			<p><b>Блок со значением break-all</b></p>
			Как говорится: 酒を飲むと打ち解けて来る<br>
			Что в переводе с японского означает: "когда_пьешь_сакэ,_становишься_откровенным". 
		</div><br>
		<div class = "test3">
			<p><b>Блок со значением keep-all</b></p>
			Как говорится: 酒を飲むと打ち解けて来る<br>
			Что в переводе с японского означает: "когда_пьешь_сакэ,_становишься_откровенным".
 
  
		</div>
	</body>
</html>
Пример использования CSS свойства word-break(перенос слов и иероглифов в CSS).CSS свойства

html — перенос слов css, который переносит все слова, не нарушая их?

Задавать вопрос

спросил

Изменено 2 года, 6 месяцев назад

Просмотрено 63к раз

Мне нужно подогнать длинный текст шириной около 300 пикселей. я использую это

css :

 раздел {
      ширина: 300 пикселей;
      белый цвет;
      перенос слов:разрывное слово;
      }

Моя проблема связана с word-wrap:break-word; . Это разрыв слов в середине слова. Но мне нужно, чтобы слова оставались такими, какие они есть, и чтобы документ был достаточно умным, чтобы разрывать строку, когда это уместно, и сохранять сами слова нетронутыми.

Возможно ли это? Я пробовал все варианты word-wrap , но ничего не работает. Либо абзацы не разрываются и текст остается за кадром, либо слова разрываются и пара букв в одной строке, а остальные буквы в следующей строке.

РЕДАКТИРОВАТЬ: добавление моего кода для формирования конкретного примера. Весь мой элемент стиля :