我有一个固定宽度的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
发布于 2014-02-19 01:39:41
如果我正确理解了您的问题,这可能对您有效:
.container {
width:120px;
background: lightgray;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color:#b02b7c;
}
.color {
color: black;
}
<div class="container">
<div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
</div><!-- works -->
</div>
如果省略号采用div的颜色,则将div设置为您希望省略号为的颜色,并使用.color
将初始文本设置为黑色。
https://stackoverflow.com/questions/21861125
复制相似问题