Почему текст не реагирует на padding?

Question

[Август Милович]

Добрый день, есть такой код в компоненте vue:

<div class="todo-list" v-for="todoList in todos">
            <h2 class="todo-name">{{ todoList.name }}</h2>
            <p class="create-todo">Новое задание</p>
            <p class="todo" v-for="todo in todoList.list">{{ todo }}</p>
  </div>

  // стили
  text-align: center
  padding: 12px 5px

Padding работает, но когда ширина становится минимальной, текст съезжает вправо:

Может кто знает, как такое исправить?

Answer 1

[Михаил]

Тут скорее word-wrap а не padding

Comments

[Август Милович]

Я неправильно вопрос написал, извините

Answer 2

[Август Милович]

Помогло word-break: break-all