HTML не упакован должным образом

Question

Это простой, который я знаю. У меня есть кнопка:

<a class="btn btn-choice rectangle" (click)="setQuestion(question, !question.active, $event)" [ngClass]="{ 'active': question.active }"
  href="#">
  <span class="fa fa-square"></span>
  <span class="fa fa-check-square"></span>
  <span class="title">{{ question.description }}</span>
</a>

Классы fa скрыты в зависимости от состояния кнопки (я использую bootstrap, кстати). CSS для этого выглядит так:

.btn-choice {
    @include make-text-sizes($h1-sizes);
    font-weight: 300 !important;
    color: white !important;
    background-color: $midnight;
    display: block;
    margin-bottom: 30px;
    text-align: left;

    .header {
        padding: 0.375rem 0.75rem;
    }

    .title {
        padding-right: 40px;
        display: block;
    }

    .fa {
        float: right;
        display: none;
        margin-top: 7px; // Center vertically?
    }

    &:hover,
    &:focus {
        font-weight: 400 !important;
        background-color: $cyan;
        .fa-square {
            display: block;
        }
    }

    &:active,
    &.active {
        font-weight: 400 !important;
        background-color: $cyan;
        .fa-check-square {
            display: block;
        }
        .fa-square {
            display: none;
        }
    }
}

Теперь я пытаюсь заставить заголовок иметь некоторые отступы, чтобы он никогда не перекрывал "квадратные флажки", но я не могу заставить его работать. Как вы можете видеть, .title установлен как блок, и я установил отступ справа. Если я изучу свой элемент, то увижу, что этот контур находится внутри ссылки, но текст просто продолжается через него.

Вот кодекс с вопросом:

https://codepen.io/r3plica/pen/LJZQqb

Answer 1

Я обновил кодекс для вас. https://codepen.io/charumaheshwari/pen/NLrMXb. Идея состоит в том, чтобы дать отступу справа: 40px для "title"

.title {
    display: block;
    padding-right:40px;
    white-space: initial;
  }

Answer 2

Думаю, у меня есть решение -

Основные изменения -

.btn-choice {
   padding: 20px 30px;
}

.title {
  display: block;
  width: 90%;
  white-space: initial;
}

https://codepen.io/DarianSteyn/pen/eLzMzp

Answer 3

Я адаптировал ваш пример и использовал flexbox, а также, как уже упоминалось, переписал white-space из стандарта начальной загрузки.

См. Раздвоенный код: https://codepen.io/dreitzner/pen/bxevvP

Answer 4

Я знал, что это будет просто; кажется, я могу просто добавить white-space: pre-wrap; к .title, и это решило мою проблему.