所需标签末尾的星号

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>

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

Current behavior

data....

Expected behaviour

data... *

如何解决这个问题？笨蛋 link 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>

所需标签末尾的星号

Asterisk at the end of required label

angular

css

sass

compass-sass