Html 如何在div的右上角添加一个圆并使用文本溢出显示省略号

我想用jquery在div中的appends之后显示一个动态添加项的列表。我希望div的最大宽度仅为400px。并且它应该使用文本溢出的省略号：hidden。在分区的右上角将有一个徽章

但是使用

文本溢出：hidden

，圆圈也被隐藏

目前我得到：

但正确地说，它应该显示为：

功能按钮单击（）{
var inputValue=$（“#inputField”）.val（）；
$（“.fileContent”）.append(
'' +
输入值+
'  '
);
$（“#输入字段”）.val（“”）；
}

.fileName标签{
位置：相对位置；
显示：内联；
填充：50雷姆0.40雷姆；
字号：1rem；
字号：700；
线高：1；
颜色：#fff；
文本对齐：居中；
空白：nowrap；
垂直对齐：基线；
边界半径：0.25em；
背景色：#f0ad4e；
}
.fileContent{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
证明内容：之间的空间；
/*位置：绝对位置*/
}
.fileContent#文件列表{
保证金上限：0.70雷姆；
文本溢出：省略号；
溢出：隐藏；
宽度：自动；
最小宽度：0；
最大宽度：400px；
}
.徽章{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
顶部：-10px；
右图：-15px；
宽度：20px；
高度：20px；
边界半径：50%；
文本对齐：居中；
填充：2px；
背景色：#FF4081；
字体大小：75%；
}
.徽章：悬停{
背景色：#fc1463；
}
.结束{
颜色：#fff；
文字装饰：无；
}

---

如果不需要在同一个元素上创建这两个属性，只需分别编辑文本元素，它的包装器是免费的

功能按钮单击（）{
var inputValue=$（“#inputField”）.val（）；
$（'.fileContent'）.append（''+inputValue+''）；
$（“#输入字段”）.val（“”）
}

.fileName标签{
位置：相对位置；
}
.fileName标签.text{
填充：50雷姆0.40雷姆；
字号：1rem；
字号：700；
线高：1；
颜色：#fff；
文本对齐：居中；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
垂直对齐：基线；
边界半径：0.25em；
背景色：#f0ad4e；
保证金上限：0.70雷姆；
宽度：自动；
最小宽度：0；
最大宽度：400px；
}
.fileContent{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
证明内容：之间的空间；
/*位置：绝对位置*/
}
.徽章{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
顶部：-10px；
右图：-15px；
宽度：20px；
高度：20px；
边界半径：50%；
文本对齐：居中；
填充：2px；
背景色：#FF4081；
字体大小：75%；
}
.徽章：悬停{
背景色：#fc1463；
}
.结束{
颜色：#fff；
文字装饰：无；
}

为什么不为输入值设置一个span并添加文本溢出：隐藏？省略号呢？我的意思是将其添加到span

文本溢出：省略号；溢出：隐藏而不是div@GowthamRajJ您的解决方案不起作用，您是否尝试先检查自己？BOZ的答案对您有效吗？看起来有效。