关于angular：如何包装primeng复选框标签的文本？


How to wrap text of primeng checkbox label?

我在包装复选框标签的文本时遇到麻烦。我阅读了文档以及如何使用styleClass属性，但仍然无法进行任何更改。

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

在下面的代码中，除了primeng lib和me之外，在项目中的任何地方都没有使用

ui-chkbox-label。

html：

1
2
3
4
<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次尝试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*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

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

  • 将标签文本作为属性添加到复选框所属的typescript文件中，并将文本包装在需要的位置：

    1
    2
    3
    4
    5
    6
    7
    export class xxxx {
    ...
    chBoxOneLabel ="This very very long sentence needs to be wrapped to make \

    it fit";
    ...
    }

  • 将white-space属性添加到CSS文件中的复选框标签中：

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

  • 将标签文本替换为组件属性的标签：

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

来源：

在angularjs中保留换行符

多行文字不会在视图中换行

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