如何包装原始文字复选框标签？

Question

我在包装复选框标签的文字时遇到了麻烦。我读了文档和如何使用styleClass属性，我仍然无法做任何改变。

我没有使用:host /deep/选择器，因为我没有使用@组件的styleUrl，而是一个已加载并适合火狐的组件。

除了下面代码中的primeng和me之外，在项目中任何地方都不使用ui-chkbox-label。

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

结果：

​

​

Answer 1

我找到的一个解决办法是：

• 将label文本作为属性添加到复选框所属的类型记录文件中，并在需要的地方包装文本： 出口类xxxx { ..。chBoxOneLabel =“这个非常长的句子需要包装以使其适合”；.}
• 将white-space属性添加到CSS文件中的复选框标签： .lblChBoxOne.ui-chkbox标签{空白:预包装}
• 替换组件属性标记中的label文本：

资料来源：

保留角线的断线

多行文本不会在视图中执行换行操作。

带换行符的AngularJS字符串，不带断线显示