我正在使用带有scss的angular来完成我的一个项目。我需要在需要字段时显示带标签的星号。
目前我有这段代码:
h1{
color: green;
}
label {
position: absolute;
left: 0;
cursor: text;
top: 24px;
font-size: 113px;
opacity: 1;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
label.required:not(:empty):after,
.field-header.required:after {
content: " *";
color: red;
}

<h1><label class="required">something</label></h1>
&#13;
以正确的方式正确显示星号。但我希望我的星号始终显示,无论屏幕的宽度如何。目前&#39; *&#39;不会在较小的屏幕上显示,只显示省略号。
当前行为
...数据
预期行为
数据...... *
如何解决这个问题? Plunk链接https://plnkr.co/edit/VCSa9iTLRBGYcDdnBzg1?p=preview请帮忙
答案 0 :(得分:1)
尝试在 position: absolute
中使用 *
:after
。使用 max-width: 100%
代替宽度。
我在你的CSS中做了一些改变。
Stack Snippet
body h1 {
color: green;
}
label {
font-size: 113px;
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
max-width: 100%;
padding-right: 60px;
box-sizing: border-box;
left: 0;
}
label.required:not(:empty):after,
.field-header.required:after {
content: " *";
color: red;
position: absolute;
right: 0px;
top: -15px;
}
<h1>
<label class="required">Something beautiful</label>
</h1>