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;
}

 

猜你喜欢

转载自482739566.iteye.com/blog/2283640