星号在所需标签的末尾

时间:2018-01-12 13:56:38

标签: css angular css3 sass compass-sass

我正在使用带有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;
&#13;
&#13;

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

  

当前行为

     

...数据

     

预期行为

     

数据...... *

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

1 个答案:

答案 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>