toggle组件label默认显示两个中文字符，如果超过2个就不会显示，需要调整样式，修改相关的样式中的width的大小

如下显示3个字的调整:


.x-toggle input+label:before,.x-toggle input:checked+label:before
{
width: 3em;
}

.x-toggle input+label:after {
width: 3.2em;
}

.x-toggle input+label {
width: 5em;
}

.x-toggle input:checked+label>span {
transform: translate3d(3.2em, 0, 0);
-webkit-transform: translate3d(3.2em, 0, 0);
}

如果需要样式只对其中一个toggle组件起作用，可以在默认的样式前在加一个命名空间，然后在组件的class上加上这个命名

如下：


.three.x-toggle input+label:before,.x-toggle input:checked+label:before
{
width: 3em;
}

.three.x-toggle input+label:after {
width: 3.2em;
}

.three.x-toggle input+label {
width: 5em;
}

.three.x-toggle input:checked+label>span {
transform: translate3d(3.2em, 0, 0);
-webkit-transform: translate3d(3.2em, 0, 0);
}

 

toggle组件的class上添加上three

toggle

显示如下：

runtoggle