精华内容
下载资源
问答
  • 有一行文本,不足一行,全部显示超出一行,行尾显示为省略号。 可能你会有些扫操作,用 JS 去动态的判断,尽管效果已经实现,但是看上去搓的一逼,配不上前端这个词。 下面给你介绍 两种 优雅的 方式 ,来实现...

    开发过程中我们可能会遇到这样的需求:

            有一行文本,不足一行,全部显示,超出一行,行尾显示为省略号。

    可能你会有些扫操作,用 JS 去动态的判断,尽管效果已经实现,但是看上去搓的一逼,配不上前端这个词。

    下面给你介绍 两种 优雅的 方式 ,来实现这个效果。

     

    HTML如下:

    <div class="text-to">
           这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,
           这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,
           这是测试,这是测试,这是测试
    </div>

    1:一行,超出显示为省略号

    .overflow-to-ellipsis{
        width: 200px;
        background: red;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    
    }
    
    

    效果如图:

     

    但是,某些时候,产品经理似乎总有改不完的需求和各式各样变态的需求。

    比如,两行超出显示为省略号

    再比如,三行超出显示为省略号

    再比如......

    2、多行,超出显示为省略号

    备注:此方法兼容性不佳,safari 和 chrome 支持比较好,所以感觉在 移动端 比较好用吧

    .text-to {
        background: red;
        color: white;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
         display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
       
    }

    效果如下: 

    修改 -webkit-line-clamp 的 值,就可以控制行数。

     

     

    展开全文
  • 提示:文字超出宽度显示省略号 文章目录前言一、使用步骤1.效果2.代码总结 前言 文字超出宽度显示省略号。 提示:以下是本篇文章正文内容,下面案例可供参考 一、使用步骤 1.效果 2.代码 代码如下(示例): <...

    提示:文字超出宽度显示省略号


    前言

    文字超出宽度显示省略号。


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、使用步骤

    1.效果

    在这里插入图片描述

    2.代码

    代码如下(示例):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="overBrim">
            文字超出宽度显示省略号文字超出宽度显示省略号文字超出宽度显示省略号
        </div>
    </body>
    <style>
        /* 文字超出宽度显示省略号 单行 */
      .overBrim {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
        width: 100px;
        background: rgb(196, 188, 188);
      }
    </style>
    </html>
    

    总结

    提示:适用于单行 @文字超出宽度显示省略号

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

    万次阅读 多人点赞 2018-06-25 14:34:04
    CSS控制文字超出部分显示省略号http://www.daqianduan.com/6179.html &lt;p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&gt; 如果实现单行文本的...

    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
    展开全文
  • 一行内超出显示省略号 overflow:hidden; /*超出的部分隐藏起来*/ text-overflow:ellipsis;/*超出文本以省略号 */ white-space:nowrap;/*不换行*/ 超出两行显示省略号 overflow: hidden; /*超出的部分隐藏起来*/ ...

    一行内超出显示省略号

    overflow:hidden; /*超出的部分隐藏起来*/ 
    text-overflow:ellipsis;/*超出文本以省略号 */
    white-space:nowrap;/*不换行*/
    

    超出两行显示省略号

        overflow: hidden; /*超出的部分隐藏起来*/ 
        text-overflow: ellipsis;/*超出文本以省略号 */
        display: -webkit-box;
        -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical; /*从顶部向底部垂直布置子元素 */
    

    注意:-webkit-line-clamp是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
    常见结合属性:
    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    展开全文
  • 只针对单行文本有效; 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis...css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针...
  • CSS文字超出DIV或者SPAN时显示省略号 https://www.cnblogs.com/yunyunde/p/5141470.html //需要在文本过长时显示,将超出显示成省略号: //首先设置宽度,然后让超出的部分隐藏 //如果有超出则在最后显示省略号 //...
  • 通过css实现,文字超出容器显示为省略号
  • 文字超出显示省略号

    2020-09-14 07:43:09
    文字超出显示省略号 div { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 文字多行超出显示省略号 div { width: 200px; display: -webkit-box; -webkit-box-...
  • css 文字超出部分使用省略号显示

    千次阅读 2018-03-30 09:34:39
    /*文字超出部分使用省略号显示*/ .ut-s { text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; outline: 0 !important }
  • 兼容ie的文字超出显示省略号

    千次阅读 2019-08-21 16:55:39
    兼容ie的文字超出显示省略号 单行文本的溢出显示省略号: (需要加宽度width兼容部分浏览器) overflow: hidden; // 超出隐藏 text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。 white-space: nowrap; // ...
  • 1.数字和英文超出自动换行: css添加如下代码: word-wrap: break-word;word-break: normal; 2.单行文字超出显示省略号: css添加如下代码: display:block;...3.多行文字超出显示省略号...
  • 对文本显示的行数进行控制
  • text-overflow:ellipsis... /*文字超出自动省略号(要配合width使用)*/ white-space:nowrap; /*文字超出父级元素宽度强制不换行 */ overflow:hidden; 转载于:https://www.cnblogs.com/JaniceDong/p/9100941.html...
  • 使用css将超出盒子的文字显示为省略号 目标盒子设置以下css样式就可以了: li { overflow: hidden; /* 将超出的内容隐藏 */ white-space: nowrap; /* 禁止文字自动换行 */ text-overflow: ellipsis; /* 多余的...
  • 1. 一行超出部分显示省略号 .line-clamp1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } 2. 两行超出部分显示省略号 .line...
  • tbale文字超出显示省略号 代码很简单,一个简单表格 设置表格的样式table-layout:"fixed"再设置表格的宽度(这步必须) 设置文字过长部分需要用到text-overflow标签,设置 ellipsis,意思文本超出部分省略号...
  • 所以就想着超出第一行的部分用省略号表示,这样数据也看着比较舒服。下面是加的样式: 修改前: 修改后: 修改很简单,只是在拼接数据的时候,在这栏加了:style="overflow: hidden;white-space: nowrap...
  • 本篇文章主要介绍了js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示,具有一定的参考价值,有兴趣的同学可以了解一下。
  • 一: title { overflow: hidden; white-space: nowrap;...以上 CSS 适用于单行文字超出部分,显示省略号」。如图: 二: title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp...
  • 本示例中最多显示3行,超出3行后,在第三行末尾用省略号代替显示。 view { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -...
  • 显示省略号的前提:父级需要宽度限制 文字显示一行超出限制省略号 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //显示省略号 white-space: nowrap; //强制不换行 文字显示二行超出限制省略号 text-...
  • 单行文本溢出显示省略号 { width: 100px;...超过2行超出显示省略号 overflow:hidden; //超出隐藏 text-overflow:ellipsis; //溢出显示省略号 white-space: normal; //不折行 display:-webki.
  • 文字超出一行显示省略号 overflow:hidden; text-overflow: ellipsis; white-space:nowrap; 文字超出两行显示省略号 overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient:...
  • <div class="time" :show-overflow-tooltip="true">文件名: {{ 文件名 | ... * 文件名超出24个字符后显示省略号 */ ellipsis(value) { if (!value) return '' if (value.length > 24) { return value
  • 一行文字超出长度的部分显示… .word { width: 250rpx; //设置宽度 word-break: break-all; //允许在单词内换行 text-overflow: ellipsis; // 以省略号显示超出的文本 display: -webkit-box; -webkit-box-...
  • 文字超出隐藏显示省略号

    千次阅读 2014-03-19 11:44:26
    单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏 单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,780
精华内容 5,912
关键字:

文字超出显示为省略号