单行及多行文本溢出以省略号显示的方法总结_html/css_WEB-ITnose

需求：

在前端页面布局中，经常会有因文字过多而影响页面排版。特别是在移动端页面中，因屏幕宽度不够段落文字如完全显示则会打乱布局。因此若段落文字能根据屏幕空余大小而显示就完美了，也就是若屏幕够大，段落文字就完全显示，若屏幕很小，则段落文字以省略号的形式部分显示。

解决办法：

在CSS3中有text-overflow属性，不熟悉的同学可以点此查询。用来实现单行文本的溢出显示省略号，单行文本的溢出显示省略号在现代浏览器及移动端都能实现兼容。

效果如图：

实现方法：

        
作为微软的游戏平台，Xbox已经出现在了Windows Phone和Windows 8中，就在最近，微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下，Xbox Live服务影响力越来越大，渗透面也越来越广。
 

    p {        width: 410px;        overflow: hidden;        text-overflow: ellipsis;        white-space: nowrap;    } 

问题来了： 如果我们要实现多行文本溢出显示省略号呢？

解决办法： Webkit支持一个名为-webkit-line-clamp的属性，不熟悉的同学可以点此查询。这个属性是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。但在webkit内核的浏览器中可以使用。

效果如图：

实现方法：

    
        
作为微软的游戏平台，Xbox已经出现在了Windows Phone和Windows 8中，就在最近，微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下，Xbox Live服务影响力越来越大，渗透面也越来越广。

      
查看更多关于单行及多行文本溢出以省略号显示的方法总结_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110498