精华内容
下载资源
问答
  • 省略号

    2016-12-10 19:26:09
    省略号:display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 238px;

    省略号:display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 238px;


    展开全文
  • CSS控制文字,超出部分显示省略号

    万次阅读 多人点赞 2018-06-25 14:34:04
    CSS控制文字,超出部分显示省略号http://www.daqianduan.com/6179.html <p style="... 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然...

    CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html

     

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">

     

     

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

    实现方法:

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

    效果如图:
    dome1

    但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

    接下来重点说一说多行文本溢出显示省略号,如下。

    实现方法:

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    效果如图:
    dome2

    适用范围:
    因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

    注:

    1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    实现方法:

    p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
    p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    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%);
    }

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

    注:

    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
    分类: css
    展开全文
  • CSS文本超过两行用省略号代替(兼容所有浏览器)

    万次阅读 多人点赞 2018-09-18 14:44:55
    CSS文本超过两行用省略号代替1、常规写法(只兼容Chrome内核浏览器)2、可以兼容所有浏览器的方式 1、常规写法(只兼容Chrome内核浏览器) 完整代码供参考: &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;...

    方法一:常规写法(只兼容Chrome内核浏览器)

    完整代码供参考:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>Titile</title>
        <style type="text/css">
          .test1{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
          }
        </style>
      </head>
      <body>
        <div class="test1">
          测试文字1234567890测试文字1234567890测试文字1234567890测试文字1234567890
        </div>
      </body>
    </html>
    

    (1)只显示一行,超出部分用省略号

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

    (2)只显示两行(或多行),超出部分用省略号

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;  // 控制多行的行数
        -webkit-box-orient: vertical;
    

    这个处理方式的目前只兼容webkit内核的浏览器:
    在这里插入图片描述


    方法二:可以兼容所有浏览器的方式( js + CSS实现 )

    思想:首先新建一个隐藏的DOM节点,把要显示的内容插入到该DOM节点中,然后计算该DOM的宽度,如果超过了原来文本宽度的两倍,则显示省略号。
    以下为Vue.js的实现代码(仅供参考):

    <template>
      <div :class="{content: true, ellipsis: ellipsis}">
        {{content}}
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          content: '这里是测试的文字,abc,123,这里是测试的文字,abc,123,这里是测试的文字,abc,123',
          ellipsis: false // 判断是否要加上...的样式
        }
      },
      create () {
        if (this.content && this.content.trim()) {
          const contentWidth = 800 // 假设原来文本的宽度的800,这里根据具体的情况而定
          this.ellipsis = this.isEllipsis(this.content.trim(), contentWidth)
        }
      },
      method: {
        isEllipsis (content, contentWidth) {
          let el = document.createElement('div')  // 创建一个临时div
          el.innerHTML = content
          el.style.whiteSpace = 'nowrap' // 不换行
          el.style.position = 'absolute'
          el.style.opacity = 0 // 完全透明
          document.body.appendChild(el)
          const elWidth = el.clientWidth  // 获取这个含有content内容的临时div的宽度
          document.body.removeChild(el)
          return elWidth >= contentWidth * 2   // 判断这个临时div的宽度是否大于原节点宽度的两倍
        }
      }
    }
    </script>
    
    <style lang="scss">
      .content {
        max-height: 45px;  // 两行文字的最大高度
        line-height: 22px;
        overflow: hidden;
        position: relative;
        &.ellipsis {
          &:after {       // 如果超过2行的宽度,则用...放在第二行的结尾
            content: '...';
            font-weight: bold;
            position: absolute; // 调整...的位置
            top: 22px;
            right: 0;
            padding: 0 20px 1px 45px;
            background: url('../images/ellipsis_bg.png') repeat-y;   // 预先准备好的覆盖的尾部图片
          }
        }
      }
    </style>
    
    

    方法三:可以兼容所有浏览器的方式( 纯CSS实现 )

    通过float特性实现多行文字截断效果,基本原理:
    在这里插入图片描述

    有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动:
    1、当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。
    2、如果浅蓝色盒子文本过多,高度超过了粉色盒子,则黄色盒子不会停留在右下方,而是掉到了粉色盒子下。

    好了,这样两种状态的两种展示形式已经区分开了,那么我们可以将黄色盒子进行相对定位,将内容溢出的黄色盒子移动到文本内容右下角,而未溢出的则会被移到外太空去了,只要我们使用 overflow:hidden就可以隐藏掉。
    在这里插入图片描述

    基本原理就是这样,我们可以将浅蓝色区域想象成标题,黄色区域想象为省略号效果。那么你可能会觉得粉色盒子占了空间,那岂不是标题会整体延后了吗,这里可以通过 margin 的负值来出来,设置浅蓝色盒子的 margin-left 的负值与粉色盒子的宽度相同,标题也能正常显示。

    具体代码如下:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .wrap {
                height: 40px;
                line-height: 20px;
                overflow: hidden;
            }
            
            .wrap .text {
                float: left;
                margin-left: -5px;
                width: 100%;
                word-break: break-all;
            }
            
            .wrap::before {
                float: left;
                width: 5px;
                content: '';
                height: 40px;
            }
            
            .wrap::after {
                float: right;
                content: "...";
                height: 20px;
                line-height: 20px;
                /* 为三个省略号的宽度 */
                width: 3em;
                /* 使盒子不占位置 */
                margin-left: -3em;
                /* 移动省略号位置 */
                position: relative;
                left: 100%;
                top: -20px;
                padding-right: 5px;
                background-color: #FFF;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="text">
                That's the basic idea. You can imagine the light blue region as the title, and the yellow region as the ellipsis. Then you may think that the pink box takes up space, but will the title be delayed as a whole? Here you can come out by the negative value of margin. Set the negative value of the pale blue box to be the same width as the pink box, and the title can also be displayed normally.
            </div>
        </div>
    </body>
    </html>
    

    这里我目前看到最巧妙的方式了。只需要支持 CSS 2.1 的特性就可以了,它的优点有:

    兼容性好,对各大主流浏览器有好的支持。

    响应式截断,根据不同宽度做出调整。

    文本超出范围才显示省略号,否则不显示省略号。

    至于缺点,因为我们是模拟省略号,所以显示位置有时候没办法刚刚好,所以可以考虑:

    加一个渐变效果,贴合文字,就像上述 demo 效果一样。

    添加 word-break:break-all; 使一个单词能够在换行时进行拆分,这样文字和省略号贴合效果更佳。

    这个方法应该是我看到最好的用纯 CSS 处理的方式了,如果你有更好的方法,欢迎留言交流!

    (https://segmentfault.com/a/1190000016879657)

    展开全文
  • 1. 单行省略号 实现单行文本的溢出显示省略号用text-overflow:ellipsis属性实现,需要添加width属性 .textEllipsis{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2. 多行省略...

    1. 单行省略号

    实现单行文本的溢出显示省略号用text-overflow:ellipsis属性实现,需要添加width属性

    .textEllipsis{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    

    在这里插入图片描述

    2. 多行省略号

    多行文本溢出显示省略号
    WebKit浏览器或移动端的页面

    .textEllipsis{
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 3;  /*显示的行数*/
    	overflow: hidden;
    	word-break:break-all; /*可择*/
    }
    

    在这里插入图片描述
    word-break:break-all;正如其名字,所有的都换行。毫不留情,一点空隙都不放过。

    非WebKit浏览器

    .textEllipsis {
            position: relative;
            line-height: 20px;
            height: 60px; /*height高度正好是line-height的n倍*/
            overflow: hidden;
            border: #5D5D5D solid 1px;
            word-break: break-all;
        }
    
        .textEllipsis::after {
            content: "…";
            position: absolute;
            bottom: 0;
            right: 0;
            width: 17px;
            padding-left: 33px;
            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优化该方法(这里涉及到中英文的字体宽度等问题,故比较麻烦)
    使用一些js库来处理省略号是比较好的选择
    如:
    1.Clamp.js 下载及文档地址:https://github.com/josephschmitt/Clamp.js 使用也非常简单:

    var module = document.getElementById('clamp-this-module');
        $clamp(module,{clamp:3});
    

    2.jQuery插件-jQuery.dotdotdot 这个使用起来也很方便:

    $(document).ready(function(){
        $('#wrapper').dotdotdot({
          //
        });
      });
    

    借鉴地址

    展开全文
  • 文字省略号

    2019-04-01 15:51:44
    如果文字要把超出内容变成省略号,要在文字上面加上这两句 text-overflow: ellipsis; overflow: hidden; 还要在父元素那边加上 white-space: nowrap; overflow: hidden; 不然文字会换行,或者直接省略后面的...
  • 我们经常会在开发过程中遇到这样的需求:不换行,超出的文本显示省略号;或者是超出两行显示省略号。那么我们都知道这个功能是CSS就能实现的,但是我们可能会经常忘记这些CSS属性,或者会记得比较混乱,那么我们就来...
  • 小程序文本超出一行显示省略号… 平常都是直接css操作如以下就行了,但是细心的产品发现一个平时被忽略的问题,安卓和ios的省略号显示效果不一样,安卓的…是居中显示,ios的下沉显示!这个有办法让安卓像ios一样...
  • (隐藏部分用省略号) white-space:nowrap;(不换行) 多行隐藏 overflow: hidden;(超出部分隐藏) text-overflow: ellipsis; (隐藏部分用省略号) display: -webkit-box; -webkit-line-...
  • 1.text-overflow文本有溢出时显示css省略号clip ellipsis样式 想要溢出的部分不显示但用省略号(…)显示.用text-overflow文本溢出省略号属性样式实现。 text-overflow语法: text-overflow : clip | ellipsis ...
  • css text文本超出隐藏显示省略号 overflow: hidden; text-overflow: ellipsis;//溢出用省略号显示 display: -webkit-box;//将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient: vertical; -webkit-line...
  • 如何解决Python输出是省略号的问题大家在用Python工作的时候是否遇到过Python输出是省略号的问题,那么遇到这种情况后小伙伴是如何解决的呢?是不是也有刚接触Python或者正在参加Python培训学习的小伙伴还没有什么好...
  • 最近在学习tensorflow object ...阅读到含有省略号的代码。不是很理解什么意思。 C:\Program Files\JetBrains\PyCharm Community Edition 2019.1.1\helpers\typeshed\stdlib\3\collections (__init__.pyi...
  • 我想让下面这个 超出部分隐藏并显示省略号 show-overflow-tooltip 添加上面这个 结果是 没有出现省略号 后来经我发现 是 外面一层不能包含div 下面是去掉div后 结果如下: ok 结束 一个小坑坑 填上 ...
  • HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
  • 1、单行省略号width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以在scss中把width变为变量:@mixin overflow($width){ width:$width; overflow: hidden; text-overflow: ...
  • TextView省略号

    2018-07-31 08:52:02
    package util; import android.text.Layout; import android.widget.TextView; /** * Created on 2018/7/30. ... * @desc TextViewUtils ...public class TextViewUtils { ... * 含省略号否 * * @...
  • 1.单行文本框超出部分省略号显示 单行文本超出部分省略号显示,设置标签固定宽,代码如下: //html代码 <p class="des">各位李氏宗亲大家好,我来自河北保定市易县,有易县的朋友吗?联系电话13213198250</p&...
  • 单独一行超出省略号显示 text-overflow:ellipsis;overflow:hidden;white-space:nowrap; 段落超出指定行数省略号显示 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line...
  • 单行、多行文本省略号

    千次阅读 2019-06-26 09:26:35
    文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号 文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号</p> </div> .box p{ width: 20...
  • c++中的省略号

    千次阅读 2018-09-01 17:23:56
     C++允许定义形参个数和类型不确定的函数,不确定的形参可以使用省略号“…”。 int add(int firstParam, … )  使用可变参数函数时注意: 省略号必须在参数列表的末尾。 运行时,才能确认参数的具体个数与...
  • css显示省略号

    2019-10-22 18:53:02
    /*显示一行,省略号*/ p{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } /*显示两行,省略号*/ p{ text-overflow:-o-ellipsis-lastline; overflow:hidden;...
  • CSS段落省略号 CSS样式截取字符串过长用省略号表示.test{width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  • css省略号

    2016-01-08 15:51:51
    css省略号单行省略 .ellipsis { word-wrap: normal; /* for IE */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 两行省略 .text-ellipsis { word-break:break-all;
  • 显示省略号的前提:父级需要宽度限制 文字显示一行超出限制省略号 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //显示省略号 white-space: nowrap; //强制不换行 文字显示二行超出限制省略号 text-...
  • HTML多行省略号

    2020-01-03 09:40:03
    css只能设置单行超出用省略号表示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 有时候我们需要两行或者多行,超出就用省略号代替,之前是通过后端截取字符串长度来控制,但字符串中空格、...
  • css省略号样式

    千次阅读 2019-12-16 16:22:09
    在样式上加overflow: hidden;white-space: nowrap;text-overflow: ellipsis,超出一定字数就会显示省略号```
  • 文字样式(Text Style)是一组可...这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下。我们经常会遇到文字太多,而为了不打破原有布局,需...
  • css超出部分省略号

    千次阅读 2018-10-16 10:07:43
    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 CSS实现单行省略号 p{ overflow: hidden; text-overflow:ellipsis; white-space: ...

空空如也

空空如也

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

省略号