首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >设置`文本溢出:省略`的点颜色

设置`文本溢出:省略`的点颜色
EN

Stack Overflow用户
提问于 2014-02-19 01:30:56
回答 1查看 34.2K关注 0票数 43

我有一个固定宽度的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

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21861125

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档