所需标签末尾的星号

Question

我在我的一个项目中使用 angular 和 scss。我的情况是，当需要该字段时，我必须在标签上显示一个星号。

目前我有这个代码：

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>

这会以所需的方式正确显示星号。但我希望我的星号始终显示，而不管屏幕的宽度如何。目前 '*' 不会在小屏幕上显示，只会显示省略号。

当前行为

数据....

预期行为

数据... *

如何解决这个问题？插入链接https://plnkr.co/edit/VCSa9iTLRBGYcDdnBzg1?p=preview请帮助

Answer 1

尝试在 :after 中将 position: absolute 用于 *。使用 max-width: 100% 而不是宽度。

我对你的 css 做了一些修改。

堆栈片段

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>