CSStext-overflow超出溢出显示省略号

text-overflow语法：

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

 text-overflow设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。

要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr 禁止换行标签）

或者

css命令：white-space: nowrap; 

例子：

html：

 

<div class="blog_time">
      <p class="blog-title">顺势而为，HTML发展与UI组件设计进化</p>
   </div>
或者：
<div class="blog_time">
      <p class="blog-title"><nobr>顺势而为，HTML发展与UI组件设计进化</nobr></p>
   </div> 

 css ： 

 

 

.blog_time {
    width :100px //设置宽度 
}

.blog-title {
    font-size: 18px;  //字体大小
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
或者

.blog_time {
    width :100px //设置宽度 
}

.blog-title {
    font-size: 18px;  //字体大小
    overflow: hidden;
    text-overflow: ellipsis;
}