text-overflow:ellipsis;

text-overflow: clip|ellipsis;
clip :不显示省略标记（…），只是简单的裁切
ellipsis :当对象内文本溢出时显示省略标记（…）

很多时候，文字太长，都会考虑显示省略号标记。但是对于text-overflow: ellipsis; 是有条件的。

test01:

<div class="ad">text-overflow:ellipsis;当文本溢出时是否显示省略。text-overflow:ellipsis;当文本溢出时是否显示省略。</div>

.ad{ width: 400px; background: #f0dcb9; text-overflow: ellipsis; }

效果：

没有得到想要的效果，查阅资料了解：

实现溢出时产生省略号的效果，还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。

test02:

<div class="ad">text-overflow:ellipsis;当文本溢出时是否显示省略。实现溢出时产生省略号的效果，还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。</div>

.ad{ width: 400px; background: #f0dcb9; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

效果：