设置“text-overflow：ellipsis”的点颜色 [英] Set dot color of `text-overflow: ellipsis`

问题描述

我有一个固定宽度的 div ，其中有一个 div 文本的部分在 span 中进行着色。文本 div 具有用于文本溢出的所有必要样式，在结尾处带有点（省略号），但点不是继承 span 的颜色，因为它们的定义是在 div 。当我把定义放在 span 时，它忽略了它的父节点宽度。

测试代码：

.container {宽度：120像素;} {文本的空白。NOWRAP; text-overflow：ellipsis;溢出：隐藏;}颜色{颜色：＃b02b7c;}

<预类=片段 - 代码HTML语言，HTML prettyprint-覆盖> < 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> <！ - 无效 - >< / div>

有没有任何干净的CSS方法来解决这个问题？我想坚持使用 text-overflow：ellipsis; ，因为文本截断的其他解决方案在我看来有点凌乱。

解决方案

如果我正确地理解你的问题，这可能会为你工作：

<一个HREF =http://jsfiddle.net/badAdviceGuy/VG3bK/5/>演示小提琴

如果省略号走的是div的颜色，然后使div为你想要的省略号的颜色，并使用 .color 将初始文本设置为黑色。

HTML：

 < div class =container> 
< div class =text>< span class =color> Lorem< / span> ipsum dolor sit amet，consetetur 
< / div><！ -  works  - > 
< / div> 
  

CSS：

 code> .text {
 //当前样式
颜色：＃b02b7c; 
} 
 
 .color {
 color：black; 
} 
  

I have a div with a fixed width, which has a div with text inside. Parts of the text are in a span for coloring. The text div has all necessary styles for text overflow with dots at the end (ellipsis), but the dots are not inheriting the span's color, because their definition is on the div. When I put the definition on the span it ignores its parents width.

Test code:

.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>

Is there any clean CSS way to solve this problem? I'd like to stick with text-overflow: ellipsis;, because the other solutions for text truncation are a bit messy in my opinion.

解决方案

If I understand your issue correctly, this might work for you:

Demo Fiddle

If the ellipsis is taking the color of the div, then make the div the color you want the ellipsis to be, and use .color to set the initial text black.

HTML:

<div class="container">
    <div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
    </div><!-- works -->
</div>

CSS:

.text {
    //current styles 
    color:#b02b7c; 
}

.color {
    color: black;
}

这篇关于设置“text-overflow：ellipsis”的点颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！