精华内容
下载资源
问答
  • 超出隐藏

    2019-12-18 11:58:36
    /* 超出隐藏省略号 */ .over_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .over_hidden { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; ...

    /* 超出隐藏省略号 */
    .over_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    height: 50px;
    }
    .over_text:hover{
    width: 200px;
    height: 100px;
    overflow: visible;
    white-space: normal;
    text-overflow: inherit;
    }
    .over_hidden {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    }

    展开全文
  • //单行超出隐藏 overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 //多行超出隐藏 display: -webkit-box; word-break: break-all...
    //单行超出隐藏
    overflow:hidden; //超出一行文字自动隐藏
     
    text-overflow:ellipsis;//文字隐藏后添加省略号
     
    white-space:nowrap; //强制不换行
    //多行超出隐藏
     display: -webkit-box;
     word-break: break-all;
     text-overflow: ellipsis;
     font-size: 28rpx;//自适应字体
     overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp:2;//设置 需要显示的行数

    了解更多,请加QQ群讨论:292539913

    展开全文
  • 文本超出隐藏

    2020-05-15 15:55:35
    超出隐藏 -单行 text-overflow:ellipsis;/*让超出的用...实现*/ white-space:nowrap;/*禁止换行*/ overflow:hidden;/*超出的隐藏*/ 超出隐藏 -多行 overflow: hidden; text-overflow: ellipsis; display...
    超出隐藏 - 单行
        text-overflow:ellipsis;        /*让超出的用...实现*/
        white-space:nowrap;        /*禁止换行*/
        overflow:hidden;        /*超出的隐藏*/
     
    超出隐藏 - 多行
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;     //作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical;     //设置伸缩盒子的子元素排列方式--从上
    展开全文
  • 文字超出隐藏

    2016-01-07 11:12:04
    单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏 单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行

    单行文本

    [编辑]demo

    .ellipsis1{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    <div class="ellipsis1">
    单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏
    单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏
    </div>
    

    [编辑]注意

    text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

    [编辑

    [编辑]多行文本

    [编辑]针对某个浏览器的做法

    [编辑]chrome

    在新版的chrome中有一个属性-webkit-line-camp属性,它允许你指定特定行数省略。

    .ellipsis-more-webkit{
        width:100%;
        height: 50px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;/*行数*/
        -webkit-box-orient: vertical; /* 方向 */
        overflow: hidden;
    }
    <div class="ellipsis-more-webkit">
    两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏
    且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号,两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
    两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
        </div>
    

    [编辑]opera

    在opera浏览器中,也有一个支持属性,即text-overflow:-o-ellipsis-lastline,它能识别超出容器的最后一行作省略。

    .ellipsis-more-opera{
        width:100%;
        height: 50px;
        line-height: 25px;
        text-overflow:-o-ellipsis-lastline;
        overflow: hidden;
    }
    <div class="ellipsis-more-opera">
    两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏
    且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号,两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
    两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
        </div>
    

    [编辑]通用方法

    [编辑]纯css,支持IE9+,firefox,chrome等

    .ellipsis {
        overflow: hidden;
        height: 100px;
        line-height: 25px;
        margin: 20px;
        border: 5px solid #AAA; 
    }
    .ellipsis:before {
        content:"";
        float: left;
        width: 5px; height: 100px; 
    }
    .ellipsis > *:first-child {
        float: right;
        width: 100%;
        margin-left: -5px; 
    }        
    .ellipsis:after {
        content: "\02026";  
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        float: right; 
        position: relative;
        top: -25px; 
        left: 100%; 
        width: 3em; 
        margin-left: -3em;
        padding-right: 5px;  
        text-align: right;
        /*根据背景颜色更改渐变颜色*/
        background: -webkit-gradient(linear, left top, right top,
            from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);            
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
    }
    <div class="ellipsis">
       <p>I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
    I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
    I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
    I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
    I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
    I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
    I want to hide,</p>    
    </div>
    

    [编辑]css+jquery 主流浏览器都支持

    .ellipsis-more{
        width: 100%;
        height: 50px;
        overflow: hidden;
        line-height: 25px;
    }
    <div class="ellipsis-more">
    <p>两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后
    我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号,两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏
    且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号</p>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(".ellipsis-more").each(function(i){
        var divH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        /**一般是2分法截断,但是考虑到文本里分为三种:中文字、英文字、字符;一般来说,中文字=2英文字=2字符。因此最坏情况可能前面一半字符全部是英文,
        后面一半文本全部是中文,这样二分法就会截取到25%的高度,因此考虑到最坏情况,需要3倍才截断**/
        while($p.outerHeight()>=divH*3){
            $p.text($p.text().substring(0,$p.text().length/2));
        }
        while ($p.outerHeight() > divH) {
            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        };
    });
    </script>
    <pre>
    展开全文
  • 在要超出隐藏的td标签上设定属性 white-space: nowrap;text-overflow: ellipsis;overflow: hidden;解决了这个问题的,我们再来看一下两个基本属性①table-layout属性用来显示表格单元格、行、列的算法规则。所有...
  • css超出隐藏

    2019-09-20 10:15:05
    CSS多行文字超出隐藏加省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box...
  • css 超出隐藏

    2018-05-09 01:34:22
    css 超出隐藏 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 复制代码
  • css text文本超出隐藏显示省略号 overflow: hidden; text-overflow: ellipsis;//溢出用省略号显示 display: -webkit-box;//将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient: vertical; -webkit-line...
  • div overflow 超出隐藏属性使用说明,不知道overflow怎么用的朋友可以参考下。
  • 文本超出隐藏css

    2020-09-10 14:13:45
    多行文本超出隐藏… overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: 40px; line-height: 20px; 单行文本超出隐藏 ...
  • 内容超出隐藏,和 table 标签一样 需要设置 table-layout: fixed; 超出… white-space: nowrap;text-overflow: ellipsis;overflow: hidden; (需要有宽度); &lt;style&gt; .tb-list{ display: table; ...
  • css控制文本超出隐藏

    2019-05-05 16:36:40
    本文主要介绍css实现文本单行和多行超出隐藏显示省略号。 一、单行超出隐藏 .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 二、多行超出隐藏 .ellipsis-2 { display: -...
  • html文本超出隐藏

    2020-08-06 16:39:38
    文本单行或多行垂直居中: display: flex; align-items: left; ...文本中超出隐藏,一行或多行 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:.
  • css:文本超出隐藏

    2020-06-23 11:58:46
    文本单行超出隐藏 overflow: hidden; text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行(一行内容) 文本多行超出隐藏 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis...
  • 本文转载于:猿2048网站文本超出隐藏 综合整理 最近的开发中,文本超出隐藏总是一个没有得到完整解决的问题,现在整理一遍,虽然也没有得出一劳永逸的方案。 PURE CSS 单行隐藏 需要限制 width overflow: ...
  • 今天小编就为大家分享一篇解决layui表格内文本超出隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 隐藏之前与隐藏之后的效果显而易见,在版面的美观度上起到一定的作用,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对你有所帮助
  • vue 文本超出隐藏 展开收起

    千次阅读 2020-05-13 15:46:16
    vue 文本超出隐藏 展开收起 首先在需要设置超出隐藏的内容块写一个固定高度,超出设置隐藏 <div //class="checkboxHeight"// overflow:hidden;这里可以写文本样式超出几行... 显示 :style="{height:showMore...
  • 文字超出隐藏显示省略号

    千次阅读 2014-03-19 11:44:26
    单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏 单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行
  • 以下三个需要配合使用: text-overflow: ellipsis; //字体超出用省略号显示 overflow:hidden; // 超出隐藏 white-space:nowrap // 不换行
  • css文本超出隐藏 显示三个点 文本超出显示三个点一般分两种情况 一、单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二、多行文本超出隐藏 text-overflow: -o-ellipsis-last...
  • flex布局css控制文本超出隐藏

    千次阅读 2019-09-18 03:31:55
    块级元素控制文本超出隐藏 white-space:nowrap; text-overflow:hidden; text-overflow:ellipsis; flex元素,需要改变以下两部分: 嵌套div,div上控制超出隐藏 在flex元素上添加 min-width: 0; ...

空空如也

空空如也

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

超出隐藏