如何包装primeng复选框标签的文本？答案

【问题标题】：How to wrap text of primeng checkbox label?如何包装primeng复选框标签的文本？
【发布时间】：2019-04-09 18:43:31
【问题描述】：

我在包装复选框标签的文本时遇到问题。我阅读了docs 和how to use styleClass properties 仍然无法做出任何改变。

我没有使用:host /deep/ 选择器，因为我没有使用@Component 的styleUrl，而是加载并适应了Firefox。

ui-chkbox-label 没有在项目的任何地方使用，除了下面代码中的primeng lib和我。

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

结果：

【问题讨论】：

标签： angular checkbox styles primeng

【解决方案1】：

我发现的一种解决方法是：

将标签文本作为属性添加到复选框所属的打字稿文件中，并将文本包装在需要的地方：

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>

来源：

Preserve line breaks in angularjs

multi-line text will not do line break in view

AngularJS String with newlines, shown without breaks

【讨论】：