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