我有一个div固定的宽度,里面有div文字.部分文字span用于着色.文本div具有所有必要的样式,用于文本溢出,最后用点(省略号),但点不继承span颜色,因为它们的定义是在div.当我把定义放在上面时span,它忽略了它的父宽度.
测试代码:
.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>是否有任何干净的CSS方法来解决这个问题？我想坚持下去text-overflow: ellipsis;,因为在我看来,文本截断的其他解决方案有点混乱.
参考资料来源:https: //www.w3schools.com/cssref/css3_pr_text-overflow.asp
css ×1