Здравствуйте:
Есть задача, перенести текст внутри элемента.
word-break:break-all
переносит всё, но коряво:
word-wrap:break-word
переносит как надо, но только слова, но не переносит одно слово:
Подскажите, как реализовать чтобы и слово и слова переносились правильно?
Заранее спасибо!
Вот несколько примеров переноса слов, можете выбрать подходящий:
.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>­</xmp>
Ро­ня­ет лес баг­ря­ный свой убор,
Сре­брит мо­роз увя­нув­шее по­ле,
Про­гля­нет день как буд­то по­не­во­ле
И скро­ет­ся за край окруж­ных гор.
Пы­лай, ка­мин, в моей пус­тын­ной келье;
А ты, вино, осен­ней сту­жи друг,
Про­лей мне в грудь от­рад­ное пох­мелье,
Ми­нут­ное заб­венье горь­ких мук.
</div>
<div class="block block-3">
Свойство <xmp>word-break</xmp>
Роняет лес багряный свой убор,
Сребрит мороз увянувшее поле,
Проглянет день как будто поневоле
И скроется за край окружных гор.
Пылай, камин, в моей пустынной келье;
А ты, вино, осенней стужи друг,
Пролей мне в грудь отрадное похмелье,
Минутное забвенье горьких мук.
</div>
<div class="block block-4">
Свойство <xmp>hyphens</xmp>
Роняет лес багряный свой убор,
Сребрит мороз увянувшее поле,
Проглянет день как будто поневоле
И скроется за край окружных гор.
Пылай, камин, в моей пустынной келье;
А ты, вино, осенней стужи друг,
Пролей мне в грудь отрадное похмелье,
Минутное забвенье горьких мук.
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Нужно сверстать треугольный конец у блока со слайдеромКаким образом это реализуется? Спасибо заранее
Есть контейнер header в котором расположена навигация и логоКогда задаю opacity то все элементы становятся прозрачными
Добрый деньМожет кто-нибудь знает отличный способ верстки данных схем, да и вообще подобных