Как центрировать и переносить на новую строку текст?

Question

[zeni1agent]

Я пытаюсь сделать так что бы произвольный текст находился по центру
А в случае достигая границы основного дива переносился на новую строку

<div class="bod">
<div class="content">
<div class="algin">
<p>fffffffff</p>
<p>fffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>ffff fffffff fffffffffffffffff ffffffffffff ffffff</p>
</div>
</div>
</div>

.bod{
     width:  100%;
     background-color:#b5b5b5;
     height:100%;
}
.content{
     display: flex;
  align-items: center;
  justify-content: center;
flex-direction: column;
margin:20px;
width: calc(100vw - 20px * 2);
}
.algin p{
   overflow:hidden;
    margin:0px;
    padding:0px;
    text-overflow: clip; 
	  word-wrap:  break-word;
    background-color:#ff0000;
}

Но он у меня не переносится на новую строку.
Кто знает что делать?

Comments

[Максим Тимофеев]

достигая горницы

Хорошее название для фильма про жизнь крестьян на руси

Answer 1

[zeni1agent]

Я вроде понял как это исправить вместо width надо было max-width

.algin p{
max-width: calc(100vw - 20px * 2);
}