如何包装Primeng复选框标签的文本？

Question

我在包装复选框标签的文本时遇到麻烦。我阅读了docs和how to use styleClass properties，但仍然无法进行任何更改。

我没有使用:host /deep/选择器，因为我没有使用@Component的styleUrl，而是使用了一个为Firefox加载并修改的样式。

在下面的代码中，除了primeng lib和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

我找到的一种解决方法是：

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

  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