Angular+SCSS实现必填标签末尾星号始终显示的问题求助

这个问题我之前也碰到过——核心原因是你当前的text-overflow: ellipsis作用在整个<label>元素上，包括通过:after生成的星号。当屏幕宽度不足时，浏览器会把星号和标签文本一起截断，导致星号被省略。下面给你两个实用的解决方案：

方案一：拆分文本与星号（推荐，兼容性更好） #

通过嵌套元素把标签文本和星号分开，让省略规则只作用在文本部分，星号作为独立元素始终显示。

修改后的HTML： #

<h1>
  <label class="required">
    <span class="label-content">something</span>
    <span class="asterisk"> *</span>
  </label>
</h1>

对应的SCSS： #

h1 { color: green; }

label { 
  position: absolute; 
  left: 0; 
  cursor: text; 
  top: 24px; 
  font-size: 113px; 
  opacity: 1; 
  width: 100%;
  display: flex; /* 用flex布局分配空间 */
  align-items: center;
}

.label-content {
  overflow: hidden; 
  word-break: break-all; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  flex: 1; /* 让文本部分占满剩余可用空间 */
}

.asterisk {
  color: red;
  margin-left: 6px; /* 可选：给星号和文本加一点间距 */
  flex-shrink: 0; /* 关键：禁止星号被压缩或截断 */
}

这个方案的优势是结构清晰，不管文本多长，星号都会牢牢贴在文本末尾，不会被省略。

方案二：绝对定位星号（无需修改HTML结构） #

如果不想调整HTML结构，可以把星号绝对定位到标签右侧，同时给标签预留足够的空间，避免文本覆盖星号。

修改后的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%;
  padding-right: 50px; /* 根据字体大小预留星号的显示空间 */
}

label.required:not(:empty):after, .field-header.required:after { 
  content: " *"; 
  color: red;
  position: absolute;
  right: 0;
  white-space: nowrap; /* 确保星号不会换行 */
}

这个方案不用改HTML，但需要根据字体大小调整padding-right的值，保证星号有足够的显示区域。

内容的提问来源于stack exchange，提问作者Vikhyath Maiya