设置 text-overflow: ellipisis 时修改 ... 的颜色

我们先来看这样一段Code Snippet

	<div style='
		color: red; 
		width: 120px; 
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;
	'>
		Am a handsome programmer!
	</div>

效果如下：

看到红色的...，你可能会觉得设置完字体颜色，超出后省略号的颜色也应该是与设置的颜色是一致的。如果有这样的想法，那再来看下面的一段

	<div style='
		color: red; 
		width: 120px; 
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;
	'>
		<span style='color: green;'>Am a handsome programmer!</span>
	</div>

这时你会发现，文字颜色改为绿色，内部文字超出后的...颜色仍然是红色，并没有受到span标签内部行内样式的控制。仍然为红色。
你可能会猜测，也许是div的颜色权重太高，内部span受到影响。此时，你已经将div的颜色属性删除

	<div style='
		width: 120px; 
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;
	'>
		<span style='color: green;'>Am a handsome programmer!</span>
	</div>

为什么会变为黑色？刚刚不是设置span标签的颜色是绿色吗？

因为设置属性 text-overflow: ellipsis 后，文本超出隐藏，并显示...的颜色会从最近的一个父级块级元素/行内块级元素继承。

受这一特性的影响，所以你在内部设置的颜色不会起作用。如果一个容器内，需要频繁使用span去操作样式，那超出隐藏后...的颜色，需要从最近的一个父级块级/行内块级元素去控制。