текст div превышает ширину родителя

Question

img о том, что на самом деле происходит

По сути, есть div, текст которого превышает его максимальную ширину , Я уже пытался установить max-width:100% (чтобы увидеть, устанавливает ли он максимальную ширину для полной ширины родителя) в более или менее 10 родительских делениях, но проблема все еще происходит. Кроме того, я уже искал некоторые подобные посты здесь, и большинство из них говорят мне, чтобы использовать white-space:normal, но это фактически разрывает новую строку для каждого слова.

В приведенном ниже примере вы можете найти 3 поля, первый - «нормальный», а остальные с white-space:normal.

В исходном коде, похоже, нет проблем с ним:

<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
    <label translate>Escolher Opção:</label>
    <div class="row">
        <div class="btn-group form-vote" data-toggle="buttons">
            <div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
                <div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
                    <i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
                    <div style="white-space: normal;"> {{option.description}} </div> 
                </div>
            </div>
        </div>
    </div>
</fieldset>

JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/

Answer 1

Задача второго дива получить с btn-cirlce.

Вы должны выйти из дива

<div style="white-space: normal;"> {{option.description}} </div>

из <div class="btn-circle btn-success"

Установите .btn-circle и .description как inline-block

Демо https://jsfiddle.net/viethien/z87ar50e/5/