Как сделать чтобы текст переносился css

Как переносить текст на другую строку, как только он не помещается в контайнер?

Всем привет, скажите как сделать так, у меня есть контейнер:

 
 
бла бла бла тут типо тектс
 
 

И сделать так что, если вдруг будет длинное предложение, то чтобы текст не уходил за рамку этого div’a а просто перенёсся на другую строку? Я пробовал уже overflow, но он не помогает, включаю scroll или auto, он всё равно в линию всё делает, если пишу hidden то вообще текст обрезается. А как сделать чтобы он переносился? Вот сама проблема:

Отслеживать

371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков

задан 20 сен 2012 в 19:37

2,545 16 16 золотых знаков 75 75 серебряных знаков 130 130 бронзовых знаков

20 сен 2012 в 19:53

Вот спасибо большое! Отлично всё работает! :=)

20 сен 2012 в 19:55

word-wrap разрывает и по частям переносит на другую строчку оченьоченьдлинныепредлинныеслова, к вашим «длинным предложениям» отношения не имеет, разве что это предложение состоит только из одного длинного слова

20 сен 2012 в 20:06

можно посмотреть еще htmlbook.ru/css/word-break

white-space

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

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space

Значение	Перенос текста	Пробелы
normal	Переносится	Не учитываются
nowrap	Не переносится	Не учитываются
pre	Не переносится	Учитываются
pre-line	Переносится	Не учитываются
pre-wrap	Переносится	Учитываются

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Рис. 1. Применение свойства white-space

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

[window.]document.getElementById(» elementID «).style.whiteSpace

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .

word-wrap

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

Синтаксис

word-wrap: normal | break-word | inherit

Значения

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

       
Cуществительное





 
высокопревосходительство
 
Одушевленное существительное





 
одиннадцатиклассница
 
Химическое вещество
 
метоксихлордиэтиламинометилбутиламиноакридин





 
  

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

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

hyphens

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

Интерактивный пример

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang (en-US) .

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

Синтаксис

/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset; 

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.

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

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

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.

Формальное определение

Начальное значение	manual
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

Формальный синтаксис

hyphens =
none | (en-US)
manual | (en-US)
auto