zoukankan      html  css  js  c++  java
  • css自动省略号...,通过css实现单行、多行文本溢出显示省略号

    网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

    一、单行文本溢出显示省略号(…)

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
    1 .demo{
    2  overflow: hidden;
    3  white-space: nowrap;
    4  text-overflow: ellipsis;
    5 }

    但是这个属性并不支持多行文本溢出显示省略号。

    二、多行文本溢出显示省略号(…)

    方法一

    在WebKit浏览器或移动端的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个不规范的属性,它没有出现在 CSS 规范草案中。样式说明:

    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

    -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    -webkit-line-clamp :代表行数,比如多少行设置省略号...。 

    1 .demo{
    2     display: -webkit-box !important;  
    3     overflow: hidden;  
    4     text-overflow: ellipsis;  
    5     word-break: break-all;  
    6     -webkit-box-orient: vertical;  
    7     -webkit-line-clamp: 2;    
    8 }
    方法二
    1 .demo{
    2     position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
    3 }
    4 .demo::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    5     background: -webkit-linear-gradient(left, transparent, #fff 55%);
    6     background: -o-linear-gradient(right, transparent, #fff 55%);
    7     background: -moz-linear-gradient(right, transparent, #fff 55%);
    8     background: linear-gradient(to right, transparent, #fff 55%);
    9 }

    办公资源网址导航 https://www.wode007.com

    适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

    注意事项:

    将height设置为line-height的整数倍,防止超出的文字露出。

    给p::after添加渐变背景可避免文字只显示一半。

    由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

    方法三

    用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具 

    1.clamp.js

     1 //Single line
     2 $clamp(myHeader, {clamp: 1});
     3 
     4 //Multi-line
     5 $clamp(myHeader, {clamp: 3});
     6 
     7 //Auto-clamp based on available height
     8 $clamp(myParagraph, {clamp: 'auto'});
     9 
    10 //Auto-clamp based on a fixed element height
    11 $clamp(myParagraph, {clamp: '35px'});

    地址:https://github.com/josephschmitt/Clamp.js

    2.jQuery插件-jQuery.dotdotdot

    1 $(document).ready(function() {
    2     $("#dome").dotdotdot({
    3         // configuration goes here
    4     });
    5 });

    jquery.dotdotdot一个jQuery插件用于当文本内容超出容器大小时显示省略号 

  • 相关阅读:
    3.Appium运行时出现:Original error: Android devices must be of API level 17 or higher. Please change your device to Selendroid or upgrade Android on your device
    3.Python连接数据库PyMySQL
    2.Python输入pip命令出现Unknown or unsupported command 'install'问题解决
    2.Linux下安装Jenkins
    5.JMeter测试mysql数据库
    Android 4学习(7):用户界面
    Android 4学习(6):概述
    Android 4学习(5):概述
    Android 4学习(4):概述
    Android 4学习(3):概述
  • 原文地址:https://www.cnblogs.com/ypppt/p/12909887.html
Copyright © 2011-2022 走看看