精华内容
下载资源
问答
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 可以设置文本溢出显示省略号 ~~~ .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;

    }

    ~~~

    展开全文
  • 另一种方法,适合各种终端,但有一个bug:文字未超出行的情况下也会出现省略号,可结合js优化该方法。代码如下:.text {position: relative;line-height: 30px;max-height: 60px;overflow: hidden;width: 400px;...

    另一种方法,适合各种终端,但有一个bug:文字未超出行的情况下也会出现省略号,可结合js优化该方法。

    代码如下:

    .text {

    position: relative;

    line-height: 30px;

    max-height: 60px;

    overflow: hidden;

    width: 400px;

    margin: 20% 30%;

    border: 1px solid #ccc;

    }

    .text::after{

    content: "...";

    position: absolute;

    bottom: 0;

    right: 0;

    padding-left: 40px;

    background: -webkit-linear-gradient(left, transparent, red 50%);

    background: -o-linear-gradient(right, transparent, red 50%);

    background: -moz-linear-gradient(right, transparent, red 50%);

    background: linear-gradient(to right, transparent, red 50%);

    }

    需要注意的事项:

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

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

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

    展开全文
  • 4种方法实现单行、多行——文本溢出显示省略号一、单行溢出在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码:显示效果:二、那么多...

    4种方法实现单行、多行——文本溢出显示省略号

    一、单行溢出
    在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码:

    4种方法实现单行、多行——文本溢出显示省略号

    显示效果:4种方法实现单行、多行——文本溢出显示省略号

    二、那么多行文本溢出呢?具体代码如下:


    4种方法实现单行、多行——文本溢出显示省略号显示效果:

    4种方法实现单行、多行——文本溢出显示省略号

    说明:
    1、该方法不支持ff,主要是-webkit-line-clamp这一属性不是标注的一部分,可能是webkit内部使用的,或者被弃用的。根据存在即合理的原则,也被很多人发现,不妨试一试。

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

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

    三、这也是多行文本溢出,采用的:after来解决的。具体代码如下

    4种方法实现单行、多行——文本溢出显示省略号显示效果如图:

    4种方法实现单行、多行——文本溢出显示省略号说明:该方法适用范围广,但在文字未超出行的情况下也会出现省略号,可结合js优化该方法。所以的注意一下几点:
    1、将height设置为line-height的整数倍,防止超出的文字露出。

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

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

    四、我们能不用js的方法来实现了?答案也是可以的 。具体代码如下:

    html 代码:

    4种方法实现单行、多行——文本溢出显示省略号css代码:

    4种方法实现单行、多行——文本溢出显示省略号js代码:

    4种方法实现单行、多行——文本溢出显示省略号效果如图:

    4种方法实现单行、多行——文本溢出显示省略号

    通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度,到达效果,这种方法可以兼容各种浏览器。

    展开全文
  • 一、css方法1、单行文本p{width:100px;overflow: hidden;... /*省略号*/}2、多行文本这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器p{width:100px;height:40px;/*需要展示行高度*...

    一、css方法

    1、单行文本p{

    width:100px;

    overflow: hidden;  /*超出部分隐藏*/

    white-space: nowrap;  /*禁止换行*/

    text-overflow: ellipsis; /*省略号*/

    }

    2、多行文本

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

    p{

    width:100px;

    height:40px;/*需要展示行高度*/

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

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

    text-overflow: ellipsis; /* 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/

    -webkit-line-clamp: 2;

    overflow : hidden;

    }

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

    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');

    展开全文
  • 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不...
  • css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容) <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <...
  • 用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。 css 代码: p{ width:100px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; /*省略号*/ ...
  • 1、单行文本溢出显示省略号 直接用 css 属性 text-overflow: ellipsis; 设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本溢出显示省略号 直接用 css 属性 -webkit-...
  • 单行溢出显示省略号: 多行文本溢出显示省略号
  • 单行文本的控制,以前是由程序员完成的,实现截字效果。 今天介绍的方法兼容IE FF,看下面的详细介绍: 为了更符合实际,用一个div装起要调试的内容,并为这个div定义一个宽度。 例如:css代码:div{width:200px;}...
  • css单行文字溢出省略: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; css多行文字溢出省略: word-break: break-word; text-overflow: ellipsis; display: -webkit-box;...
  • 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...
  • 今天小编就为大家分享一篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 对于文本内容,单行或者多行溢出显示省略号,一般有两种操作方式 Javascript截断操作 Css溢出操作 截断操作 let str = '23048930jsldfjklsdfsdf'; str.length &amp;amp;gt; 6 ? str.splice(0,6) + '...' :...
  • 文本溢出显示省略号这个样式,我真的是逢写必忘,也是服了,简单整理一下: 单行文本 单行文本相对简单,三行代码就能搞定,喏: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然,这里...
  • 单行 p { overflow: hidden;...// 多行显示省略号,数字3为超出3行显示, p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 看完请赏个赞 ...
  • .text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: .../*-webkit-line-clamp为3,代表三行后超出隐藏加省略,常用为1。*/ ...
  • 首先看单行 <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <...
  • CSS怎么实现单行、多行文本溢出显示省略号发布时间:2021-03-19 11:30:38来源:亿速云阅读:99作者:小新小编给大家分享一下CSS怎么实现单行、多行文本溢出显示省略号,相信大部分人都还不怎么了解,因此分享这篇...
  • text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px;
  • 最近项目中很多地方有文本溢出显示省略...css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号&lt;/p&g...
  • 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
  • 单行文本溢出 .txt { width: 500px; /*让文字在同一行显示,不换行*/ white-space: nowrap;... /*文字溢出部分省略号显示*/ text-overflow: ellipsis; background-color: pink; } <div class="txt"&...
  • 1、元素必须要有宽度 width: value; 2、需要强制文本在一行显示 white-space: nowrap; 3、实现溢出内容裁剪不显示 overflow: hidden; 4、显示省略号 text-overflow: ellipsis;
  • 容器宽度:width:数值加单位 强制文本单行显示:white-space:nowrap 溢出内容为隐藏:overflow:hidden 溢出文本显示省略号:text-overflow:ellipsis
  • css单行或多行文本溢出显示省略号

    千次阅读 2017-04-08 10:17:50
    一、单行文本溢出省略 二、多行文本溢出省略 1、适用于WebKit浏览器及移动端; 2、兼容各版本浏览器
  • ... ... clip : 不显示省略标记(...),而是简单的裁切 ... ellipsis : 当对象内文本溢出显示省略标记(...) ... 设置或检索是否使用一个省略标记(...)... 实现了所想要得到的溢出文本显示省略号效果:
  • #### 文本溢出处理 ######### 单行文本溢出 #####单行文本溢出,可直接用css处理,很简单.ellipsis {overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}##### 多行文本溢出 #####多行文本溢出,在不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,450
精华内容 2,580
关键字:

单行溢出显示省略号

友情链接: 121.zip