Question

我正在使用带有scss的angular来完成我的一个项目。我需要在需要字段时显示带标签的星号。

目前我有这段代码：

＆＃13;

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;
}

＆＃13;

<h1><label class="required">something</label></h1>

＆＃13;

以正确的方式正确显示星号。但我希望我的星号始终显示，无论屏幕的宽度如何。目前＆＃39; *＆＃39;不会在较小的屏幕上显示，只显示省略号。

当前行为

...数据

预期行为

数据...... *

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

Answer 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>

星号在所需标签的末尾

1 个答案: