我有一个固定宽度的
,里面有一个带文本的
。文本的一部分在中以颜色区分。文本
已经具备了必要的样式来实现文本溢出(省略号),但是省略号的颜色没有继承的颜色,因为定义在
上。当我将定义放在上时,它忽略了其父元素的宽度。
有没有一种干净的CSS方法来解决这个问题?我想坚持使用
参考来源:https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
测试代码:
.container {
width: 120px;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.color {
color: #b02b7c;
}
<div class="container">
<div class="text">Lorem <span class="color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- works -->
<div>Lorem <span class="text color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- doesn't work -->
</div>
text-overflow: ellipsis;
,因为我认为其他文本截断的解决方案有点混乱。参考来源:https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
<div><span>some text <a>link</a> other text</span></div>
如果你将div
上的color
设置为purple
,那么当<a>
被截断时,它将变成purple
,而不是预期的<a>
颜色。你有任何想法是否有解决方案吗? - Danosaure