css3 多行文本 溢出 省略号

简介: css文本溢出显示省略号,单行文 asadsadsadsasadasdsadadasa .

css文本溢出显示省略号,

单行文


 <div class="test"> asadsadsadsasadasdsadadasa</div>
<pre name="code" class="html">  .test{
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
省略号要和文字底部对齐 得是微软雅黑,宋体不行的,默认字体,firefox是下对齐,chrome不是



 
 

多行文本

 <div class="test1"> asadsadsadsasadasdsadadasaasadsadsa
dsasadasdsadadasaasadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasaa
sadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasa</div>
  .test1{
      height: 60px;
      width: 50px;
      display: -webkit-box;
      display: -moz-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:3;
  }
line-clamp  firefox占不支持  适合用于移动端

 
 
 
 


相关文章
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
1月前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
|
1月前
编程笔记 html5&css&js 006 HTML文本:标题
编程笔记 html5&css&js 006 HTML文本:标题
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
28 0
|
3月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
39 0
|
3月前
|
前端开发
css实现单行文本溢出以及多行文本溢出
css实现单行文本溢出以及多行文本溢出
|
3月前
|
前端开发 容器
css英文文本不换行,css怎么实现英文不换行
css英文文本不换行,css怎么实现英文不换行
|
3月前
|
前端开发 容器
|
3月前
|
自然语言处理 前端开发 容器
深入研究 CSS 文本换行
深入研究 CSS 文本换行
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0