我有这个标记:
label.required:after {
content: ' *';
color: red;
}
<label class="required">please enter your username</label>
我想用text-overflow: ellipsis
处理太长的标签,如下所示:
label {
display: inline-block;
max-width: 150px;
}
label.required:after {
content: ' *';
color: red;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<label class="required ellipsis">please enter your username</label>
问题是:after
伪元素也被切断,因此不会出现 *
我希望标签看起来像这样(带有:after
伪元素显示):
please enter your us... *
是否可以?
对的,这是可能的。通过设置标签position: relative
以及伪元素的位置absolute
.
label {
position: relative;
display: inline-block;
max-width: 150px;
}
label.required:after {
content: '*';
color: red;
position: absolute;
right: 0;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<label class="required ellipsis">please enter your username</label>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)