Как обернуть текст заголовка флажка primeng? - PullRequest
Новая
       33

Как обернуть текст заголовка флажка primeng?

0 голосов
/ 06 ноября 2018

У меня проблемы с обертыванием текста метки флажка. Я прочитал документы и , как использовать свойства styleClass , и все еще не могу внести никаких изменений.

Я не использую :host /deep/ селектор, потому что я не использую styleUrl @Component, вместо этого он загружен и адаптирован для Firefox.

ui-chkbox-label не используется нигде в проекте, кроме primeng lib и me в приведенном ниже коде.

HTML: 

<p-checkbox styleClass="chBoxOne" labelStyleClass="lblChBoxOne" [(ngModel)]="allowParticipation"  
binary="true" 
label="This very very long sentence needs to be wrapped to make it fit"     
(click)="onClickAllowParticipation()"></p-checkbox>

css попытки: 

/*labelStyleClass + Container*/
.lblChBoxOne.ui-chkbox{
    word-wrap:break-word;
}

/*labelStyleClass + Label element*/
.lblChBoxOne.ui-chkbox-label{
    word-wrap:break-word;
}

/*labelStyleClass + Container element + Label element*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label{
    word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element + Label element of a checked state.*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label.ui-label-active{
    word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element + Label element of a focused state .*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label.ui-label-focus{
    word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element + Label element of a disabled state.*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label.ui-label-disabled{
    word-wrap:break-word;
}

 /*styleClass + Container*/
.chBoxOne.ui-chkbox{
    word-wrap:break-word;
}    

/*styleClass + Label element*/
.chBoxOne.ui-chkbox-label{
    word-wrap:break-word;
}

/*styleClass + Container element + Label element*/
.chBoxOne.ui-chkbox.ui-chkbox-label{
    word-wrap:break-word;
}
/*styleClass + Container element + Label element + Label element of a checked state.*/
.chBoxOne.ui-chkbox.ui-chkbox-label.ui-label-active{
    word-wrap:break-word;
}
/*styleClass + Container element + Label element + Label element of a focused state .*/
.chBoxOne.ui-chkbox.ui-chkbox-label.ui-label-focus{
    word-wrap:break-word;
}
/*styleClass + Container element + Label element + Label element of a disabled state.*/
.chBoxOne.ui-chkbox.ui-chkbox-label.ui-label-disabled{
    word-wrap:break-word;
}

Результат:

Wrap text primeng checkbox

1 Ответ

0 голосов
/ 06 ноября 2018

Один из найденных мной обходных путей:

  • Добавьте текст метки в качестве свойства в файл машинописного текста, к которому относится флажок, и оберните текст, где это необходимо: 

    export class xxxx {
...
chBoxOneLabel = "This very very long sentence needs to be wrapped to make \n
it fit";
...
}

  • Добавьте свойство white-space к метке флажка в файле CSS: 

    .lblChBoxOne.ui-chkbox-label{
    white-space: pre-wrap
}

  • Заменить текст метки в теге для свойства компонента: 

    <p-checkbox ... label={{chBoxOneLabel}}></p-checkbox>

Источники:

Сохранить разрывы строк в angularjs

многострочный текст не будет отображать разрыв строки

AngularJS Строка с переносами, показанная без разрывов

...