精华内容
下载资源
问答
  • <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?...单行文本溢出隐藏很简单了 ov..
    <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?
    英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?</div>

     单行文本溢出隐藏很简单了

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

     多行文本溢出隐藏有两种方式

     第一种方式:

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    第二种方式: 

    这里主要来说一下第二种方式

    实现思路:

    1. 首先给容器设置宽度,纵向溢出隐藏 ( overflow-y : hidden )

    2. 然后容器文本需要一个行高

    3. 容器的高度等于( 显示的行数 * 行高 )

    4. 容器设置相对定位

    5. 使用伪元素添加省略号

    6. 绝对定位,相对于容器,定位在右下角

    7. 伪元素设置 宽度 为 1个字体大小+2px 的间隙(以防旁边文字露出)

    8. 高度为一个字体大小

    9. 设置背景色覆盖住最后一个文字

    10. 当然也可以设置color给省略号设置颜色

    .ellipsis{
        width:300px;
        height:60px;
        border:1px solid #222;
        overflow-y:hidden;
        position:relative;
        line-height:20px;
    }
    .ellipsis::after{
        content:'...';
        position:absolute;
        right:0;
        bottom:0;
        width:calc(1em + 2px);
        height:1em;
        background:#fff;
        line-height:1em;
        color:red;
    }

     

    展开全文
  • 单行文本溢出省略号

    2019-11-25 08:29:35
    <!doctype html> <... <head> ...meta charset="utf-8">...单行文本溢出省略号</title> <style> .box{width:100px;heigth:20px;border:1px solid pink; white-space:...
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>单行文本溢出省略号</title>
    	<style>
        	.box{width:100px;heigth:20px;border:1px solid pink;
    		white-space:nowrap;/*强制不换行*/
    		overflow:hidden;/*溢出隐藏*/
    		text-overflow:ellipsis;/*溢出时出现省略号*/
    		}
    		
        </style>
    </head>
    
    <body>
    	<div class="box">
        	哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
    </body>
    </html>
    
    
    展开全文
  • 可以兼容火狐的溢出省略号可以兼容火狐的溢出省略号可以兼容火狐的溢出省略号可以兼容火狐的溢出省略号
  • 可以设置文本溢出显示省略号 ~~~ .wrap{ width: 200px; // 文字容器宽度 overflow: hidden; // 超出边框外隐藏 text-overflow:ellipsis; // 属性规定当文本溢出包含元素时发生的事情。 white-space: nowrap; /...

    可以设置文本溢出显示省略号

    ~~~

    .wrap{

    width: 200px; // 文字容器宽度

    overflow: hidden; // 超出边框外隐藏

    text-overflow:ellipsis; // 属性规定当文本溢出包含元素时发生的事情。

    white-space: nowrap; // 规定段落中的文本不进行换行

    }

    ~~~

    结果如下

    说明:

    css属性 .wrap 是放在你要改变样式的地方的

    ### 另外还有多行溢出省略

    ~~~

    {

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

    -webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数超过两行省略。

    overflow:hidden;

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

    text-overflow: ellipsis;

    }

    ~~~

    展开全文
  • (一)、单行文本 p{ width:100px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; /*省略号*/ } (二)、多行文本 1、在WebKit浏览器或移动端 在WebKit...

    一、css常规方法:

    (一)、单行文本

    p{
        width:100px;
        overflow: hidden;  /*超出部分隐藏*/
        white-space: nowrap;  /*禁止换行*/
        text-overflow: ellipsis; /*省略号*/
    }

    (二)、多行文本

    1、在WebKit浏览器或移动端

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

    这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器

    p{
        width:100px;
        height:40px;/*需要展示行高度*/
        display: -webkit-box; /* 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/
        -webkit-box-orient: vertical; /* 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/
        text-overflow: ellipsis; /* 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/
        -webkit-line-clamp: 2;
        overflow : hidden;
            }

    2、跨浏览器(浏览器需支持伪元素)

    p {
        position: relative;
        line-height: 1.4em;
        /* 3 times the line-height to show 3 lines */
        height: 4.2em;
        overflow: hidden;
    }
    
    p::after {
        content: "\02026";/*...*/
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;
        background:-webkit-linear-gradient(left,transparent,#fff 55%);
        background:-o-linear-gradient(right,transparent,#fff 55%);
        background:-moz-linear-gradient(right,transparent,#fff 55%);
        background:linear-gradient(to right,transparent,#fff 55%);
    
    }

    二、js方法:

    function substrLength(elementId,length){  //elementId:元素id,length:需保留字符串长度
            var text=document.getElementById(elementId);
            var result = "";
            if(text.innerText.length > length){
                result = text.innerText.substr(0,length)+"...";
            }else{
                result = text.innerText;
            }
            text.innerText=result;
        }
        substrLength('ID','length');

     

    展开全文
  • 1.单行文本溢出… overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.多行文本溢出… overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;// 限制多少...
  • 1.单行文本溢出隐藏用省略号代替 display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;/*设置为省略号显示*/ 2.多行文本溢出隐藏用省略号代替 /*多行文本溢出隐藏,省略号代替*/...
  • 单行溢出显示省略号: 多行文本溢出显示省略号
  •  那么继续进一试验,关于切除内容,这个已经基本上解决了,那就来说补省略号,不用JS, 用CSS实现的话就要用到伪对象after, 伪对象不懂的就要先去温故或百度一下。先从HTML下手,为span标签外再加一层p标签(当然你...
  • 用text-overflow:ellipsis属性来实现单行文本溢出显示省略号(…)。 css 代码: p{ width:100px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; /*省略号*/ ...
  • 主要介绍了vue实现移动端项目多行文本溢出省略功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • css单行或多行文本溢出显示省略号

    千次阅读 2017-04-08 10:17:50
    一、单行文本溢出省略 二、多行文本溢出省略 1、适用于WebKit浏览器及移动端; 2、兼容各版本浏览器
  • 单行 p { overflow: hidden;...// 多行显示省略号,数字3为超出3行显示, p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 看完请赏个赞 ...
  • 1、元素必须要有宽度 width: value; 2、需要强制文本在一行显示 white-space: nowrap; 3、实现溢出内容裁剪不显示 overflow: hidden; 4、显示省略号 text-overflow: ellipsis;
  • 不写博客吧,面试会问到,工作不好找,写吧,参考这个比较全的 http://www.css88.com/archives/5206 转载于:https://www.cnblogs.com/heboliufengjie/p/5485967.html
  • css单行文本溢出显示省略号 1.css .text { overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-...
  • css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容) <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <...
  • //单行文本溢出部分隐藏显示省略号... overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /** n 行文本溢出部分隐...
  • 单行文本溢出显示省略号单行文本溢出显示省略号 <!-- var url = ...
  • /*单行溢出,显示省略号,用text-overflow属性,需要增加宽度*/ /*溢出隐藏*/ overflow: hidden; /*隐藏的部分用...表示*/ text-overflow: ellipsis; /*文字不能转行*/ white-space: nowrap; width: 244px; ...
  • 容器宽度:width:数值加单位 强制文本单行显示:white-space:nowrap 溢出内容为隐藏:overflow:hidden 溢出文本显示省略号:text-overflow:ellipsis
  • 4种方法实现单行、多行——文本溢出显示省略号一、单行溢出在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码:显示效果:二、那么多...
  • 一、单行CSS: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行CSS: 1、样式(比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器) overflow : hidden; text...
  • 单行文本的控制,以前是由程序员完成的,实现截字效果。 今天介绍的方法兼容IE FF,看下面的详细介绍: 为了更符合实际,用一个div装起要调试的内容,并为这个div定义一个宽度。 例如:css代码:div{width:200px;}...
  • .text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: .../*-webkit-line-clamp为3,代表三行后超出隐藏加省略,常用为1。*/ ...
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 单行文本不换行,溢出以…省略 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本换行,溢出以…省略号显示 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-...
  • 如果实现单行文本溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,157
精华内容 2,062
关键字:

单行文本溢出省略号