精华内容
下载资源
问答
  • css字体溢出省略号处理(3种)

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

     

        

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

    实现方法:

    span{

        overflow: hiddden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

    效果如图:

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

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

    实现方法:

    span{ 

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 3;

        overflow: hidden;

    }

    效果如图:

    适用范围:

    因使用了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%);

    }

     

    适用范围:

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

    注:

    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

     

        

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

    实现方法:

    span{

        overflow: hiddden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

     

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

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

    实现方法:

    span{ 

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 3;

        overflow: hidden;

    }

    适用范围:

    因使用了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%);

    }

    效果如图:

    适用范围:

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

    注:

    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

     

    展开全文
  • word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;...css加入这几句话,屏幕缩小后自动变成省略号......
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    

    css加入这几句话,屏幕缩小后自动变成省略号...

    展开全文
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 列表由于标题过长而影响美观度,所以想让标题溢出文字省略号方式表现.此类文章网上会有很多,本文整理了一些经验技巧与大家共同分享,感兴趣的你可不要错过了哈,希望可以帮助到你
  • 1、单行文本溢出显示省略号 直接用 css 属性 text-overflow: ellipsis; 设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本溢出显示省略号 直接用 css 属性 -webkit-...

    1、单行文本溢出显示省略号

    直接用 css 属性 text-overflow: ellipsis; 设置:

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

    2、多行文本溢出显示省略号

    直接用 css 属性 -webkit-line-clamp: n;  (n是需要展示的行数)设置:

    {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    Tips: 

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

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

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

    因为使用了 webkit 的 css 扩展属性,该方法适用于 webkit 浏览器及移动端。

    改进方法:通过伪类在目标元素末尾处添加省略号。

        .setEllipsis {
            border: 1px solid #ccc;
            position: relative;
            max-height: 90px;
            overflow: hidden;
        }
        .setEllipsis::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%);
        }

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

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

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

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

    实现效果:

    实现代码:

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>test</title>
    <style style="text/css">
        .wrapper {
            width: 400px;
            line-height: 30px;
        }
        .text {
            border: 1px solid #ccc;
            height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .multiText {
            border: 1px solid #ccc;
            height: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .setEllipsis {
            border: 1px solid #ccc;
            position: relative;
            max-height: 90px;
            overflow: hidden;
        }
        .setEllipsis::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%);
        }
    </style>
    </head>
    <body>
        <div class="wrapper">
            <h4>单行文本超出显示...</h4>
            <div class="text">单行文本超出显示省略号单行文本超出显示省略号单行文本超出显示省略号单行文本超出显示省略号</div>
    
            <h4>多行文本超出显示...</h4>
            <div>方法一(通过-webkit-line-clamp: 3;实现)</div>
            <div class="multiText">多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号</div>
            <div>方法二(通过伪类实现)</div>
            <div class="setEllipsis">多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号</div>
        </div>
    </body>
    </html>

     

    展开全文
  • 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略 </div> 这段html不添加样式的显示如下: 文本...
    <div class="multiline">
       文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略
    </div>
    

    这段html不添加样式的显示如下:
    1

    文本单行显示,溢出显示省略号

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

    添加样式后显示效果如下:
    2

    文本多行显示,溢出显示省略号

          .multiline {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
    

    添加样式后显示效果如下:
    3

    • -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

    • display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。

    • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

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

    展开全文
  • 网页中一行文本文字溢出显示省略号的方法是: 1. overflow: hidden; /*隐藏超出宽度或高度的部分*/ 2. white-space: nowrap; /*段落不换行 强制文本在一行内显示*/ 3.text-overflow: ellipsis; /*用省略号来...
  • 经过一友技点定理理需果绿大行分近圈术小正不清要波中大型项目的洗礼,一堆bug的冲击,发现在文本溢出方面还存在一些瑕疵,大致总结了一下文本溢出显示省略号的几种使用支器事的后功发久这含层请间业在屏有随些气...
  • 单行文本溢出显示省略号 <p class="content"> 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这...
  • 文字省略号替代超出的部分:text-overflow:ellipsis 效果图: 说明 white-space 定义:设置对象内文本显示方式。通常我们使用强制一行内显示内容。 语法:white-space:normal|nowrap 元素值 说明 normal...
  • white-space:nowrap}text-overflow 属性规定当文本溢出包含元素时发生的事情。clip:修剪文本。ellipsis:显示省略符号来代表被修剪的文本。string:使用给定的字符串来代表被修剪的文本。white-space 属性设置如何...
  • 兼容火狐、Opera、chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了,但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错,当文字或字符超出外层Div的时候,自动隐藏并...
  • 1. 强制不换行 white-space: nowrap;... 文本溢出显示省略号; overflow:hidden; 溢出的部分隐藏; 2. 自动换行 word-wrap: break-word; word-break: normal; 3.强制英文单词断行 word-b...
  • css溢出隐藏加省略号

    2021-10-29 13:13:55
    width: 400px;...//属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。 white-space: nowrap;//只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。 ...
  • 单行文本溢出: display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行文本溢出 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -...
  • css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容) <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <...
  • 文字溢出隐藏问题
  • 单行文字有时候需要把多余的文字变成省略号 注意,此方法只可以设置单行文字溢出省略 需要设置文字容器的宽高,然后设置line-height跟高度一样,这样可以更美观 接着设置white-space:nowrap,让文字不换行,然后...
  • 有时候我们只想让一段文字显示一行或者几行,其他多余的部分用省略号显示,该怎么做呢? &lt;!DOCTYPE html&gt; &lt;...css3处理文本溢出显示省略号...问题&lt;/title&gt; &
  • 1.一行文本省略 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 2.多行文本省略(ps:此处是两行) text-overflow: -o-ellipsis-lastline; overflow: hidden; text-...
  • 然而我们只想在一行上显示,多余部分变成省略号,需要如何处理呢? css魔法师登场 设置一个长为100px的div <div class="content">Do you like driving ?</div> .content { width: 100px; border: 1...
  • 主要介绍了css实现文本溢出显示省略号的方法和示例分享,推荐给大家。
  • 使得div内文字溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决。 一、通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分用省略号显示 ...
  • DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程
  • table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。...添加样式让table宽高固定,内容长度过长自动隐藏并显示省略号,效果如下:
  • 溢出文字省略号显示 1.单行文本溢出显示省略号: 需要给元素设置固定宽度,如果是行内元素需要先转换为行内块元素或块元素 display: inline-block; <body> <p> 由衷敬意,难以言表。此处省略一万字。...
  • /* 溢出文字直接省略 */ { white-space:nowrap; /* 文本不换行 */ overflow-x: hidden; /* x方向溢出部分隐藏 */ text-overflow:ellipsis; /* 溢出使用省略号表示 */ }
  • 在日常使用中,有时会遇到文本超出所有区域的情况发生,就需要将超出的部分用省略号表示

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,475
精华内容 4,190
关键字:

css文字溢出变省略号

友情链接: dedrczion_best.rar