Как правильно использовать word-break:break-all и word-wrap:break-word?

286

28 октября 2017, 16:13

Здравствуйте:

Есть задача, перенести текст внутри элемента.

word-break:break-all переносит всё, но коряво:

word-wrap:break-word переносит как надо, но только слова, но не переносит одно слово:

Подскажите, как реализовать чтобы и слово и слова переносились правильно?

Заранее спасибо!

Answer 1

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

.block{ 
  margin: 1rem auto; 
  border: 1px solid #555; 
  padding: 1rem; 
  width: 200px; 
} 
.block-3{ 
  word-break: break-all; 
} 
.block-4{ 
 -moz-hyphens: auto; 
 -webkit-hyphens: auto; 
 -ms-hyphens: auto; 
}

<div class="block block-1"> 
Тег <xmp><wbr></xmp> 
  Ро<wbr>ня<wbr>ет лес баг<wbr>ря<wbr>ный свой убор, 
  Сре<wbr>брит мо<wbr>роз увя<wbr>нув<wbr>шее по<wbr>ле, 
  Про<wbr>гля<wbr>нет день как буд<wbr>то по<wbr>не<wbr>во<wbr>ле 
  И скро<wbr>ет<wbr>ся за край окруж<wbr>ных гор. 
  Пы<wbr>лай, ка<wbr>мин, в моей пус<wbr>тын<wbr>ной келье; 
  А ты, вино, осен<wbr>ней сту<wbr>жи друг, 
  Про<wbr>лей мне в грудь от<wbr>рад<wbr>ное пох<wbr>мелье, 
  Ми<wbr>нут<wbr>ное заб<wbr>венье горь<wbr>ких мук. 
</div> 
<div class="block block-2"> 
Мягкий перенос <xmp>&shy;</xmp> 
  Ро&shy;ня&shy;ет лес баг&shy;ря&shy;ный свой убор, 
  Сре&shy;брит мо&shy;роз увя&shy;нув&shy;шее по&shy;ле, 
  Про&shy;гля&shy;нет день как буд&shy;то по&shy;не&shy;во&shy;ле 
  И скро&shy;ет&shy;ся за край окруж&shy;ных гор. 
  Пы&shy;лай, ка&shy;мин, в моей пус&shy;тын&shy;ной келье; 
  А ты, вино, осен&shy;ней сту&shy;жи друг, 
  Про&shy;лей мне в грудь от&shy;рад&shy;ное пох&shy;мелье, 
  Ми&shy;нут&shy;ное заб&shy;венье горь&shy;ких мук. 
</div> 
<div class="block block-3"> 
Свойство <xmp>word-break</xmp> 
  Роняет лес багряный свой убор, 
  Сребрит мороз увянувшее поле, 
  Проглянет день как будто поневоле 
  И скроется за край окружных гор. 
  Пылай, камин, в моей пустынной келье; 
  А ты, вино, осенней стужи друг, 
  Пролей мне в грудь отрадное похмелье, 
  Минутное забвенье горьких мук. 
</div> 
<div class="block block-4"> 
Свойство <xmp>hyphens</xmp> 
  Роняет лес багряный свой убор, 
  Сребрит мороз увянувшее поле, 
  Проглянет день как будто поневоле 
  И скроется за край окружных гор. 
  Пылай, камин, в моей пустынной келье; 
  А ты, вино, осенней стужи друг, 
  Пролей мне в грудь отрадное похмелье, 
  Минутное забвенье горьких мук. 
</div>