How to wrap text of primeng checkbox label?

Question

I'm having troubles wrapping the text of the checkbox label. I read the docs and how to use styleClass properties and I'm still not able to make any change.

I'm not using :host /deep/ selector because I'm not using the styleUrl of the @Component, instead one loaded and adapted for Firefox.

ui-chkbox-label is not used anywhere in the project besides primeng lib and me in the below code.

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 attempts:

/*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;
}

Result:

score 0 · Accepted Answer · answered Nov 06 '18 at 15:09

One workaround I found is:

Add the label text as a property in the typescript file the checkbox belongs to, and wrap the text where is needed:

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

Add the white-space property to the checkbox label in the CSS file:
```
.lblChBoxOne.ui-chkbox-label{
    white-space: pre-wrap
}
```
Replace the label text in the tag for the component property:
```
<p-checkbox ... label={{chBoxOneLabel}}></p-checkbox>
```

Sources:

Preserve line breaks in angularjs

multi-line text will not do line break in view

AngularJS String with newlines, shown without breaks

How to wrap text of primeng checkbox label?

1 Answers1