精华内容
下载资源
问答
  • 下面是单行超出文本出现省略号的效果;代码如下 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 这里最好给标签添加上高度,或者设置文字不能换行 显示单行省略号效果 下面是...
    1. 首先编写正常状态超出文本隐藏的效果;代码如下

      overflow: hidden;

      使用css3实现文本超出省略号和多行省略号

      使用css3实现文本超出省略号和多行省略号

    2. 下面是单行超出文本出现省略号的效果;代码如下

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

      这里最好给标签添加上高度,或者设置文字不能换行

      使用css3实现文本超出省略号和多行省略号

    3. 显示单行省略号效果

      使用css3实现文本超出省略号和多行省略号

    4. 下面是多行超出文本出现省略号的效果;代码如下

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

      这里要注意不要给标签添加高度,让文字自动撑开多行就行

      使用css3实现文本超出省略号和多行省略号

    5. 显示多行省略号效果

      使用css3实现文本超出省略号和多行省略号

       

    注意事项

    • 多行省略号的方法只适合谷歌WebKit内核的浏览器,可以用其他方法实现

    • 每天进步一点点!希望对大家有帮助

    展开全文
  • 在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...
  • float 特性实现多行文本截断 基本原理 有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动, 当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。 如果浅蓝色盒子文本过多,高度超过...

    原文链接:https://github.com/happylindz/blog/issues/12

    float 特性实现多行文本截断

    基本原理

    1166521-20181113105809101-1337771923.jpg

    有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动,

    • 当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。
    • 如果浅蓝色盒子文本过多,高度超过了粉色盒子,则黄色盒子不会停留在右下方,而是掉到了粉色盒子下。
      好了,这样两种状态的两种展示形式已经区分开了,那么我们可以将黄色盒子进行相对定位,将内容溢出的黄色盒子移动到文本内容右下角,而未溢出的则会被移到外太空去了,只要我们使用 overflow: hidden 就可以隐藏掉。

    1166521-20181113110116730-85026424.jpg

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

    <div class="wrap">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
    </div>

    刚才的粉色盒子和黄色盒子都可以用伪元素来代替。

    .wrap {
      height: 40px;
      line-height: 20px;
      overflow: hidden;
    }
    .wrap .text {
      float: right;
      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;
    }

    实现效果:demo 地址

    1166521-20181113110439905-1818868390.gif

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

    • 兼容性好,对各大主流浏览器有好的支持
    • 响应式截断,根据不同宽度做出调整
    • 文本超出范围才显示省略号,否则不显示省略号
      至于缺点,因为我们是模拟省略号,所以显示位置有时候没办法刚刚好,所以可以考虑:
    • 加一个渐变效果,贴合文字,就像上述 demo 效果一样
    • 添加 word-break: break-all; 使一个单词能够在换行时进行拆分,这样文字和省略号贴合效果更佳。

    转载于:https://www.cnblogs.com/muqiao/p/9951148.html

    展开全文
  • Vue filters 配合Element 实现文本超出转化省略号并添加鼠标悬浮提示 filters: { previewBtn(value){ if(value.length > 10) { let text = value.slice(0,6) + '...'; that.ellipsis = false; return...

    Vue filters 配合Element 实现文本超出转化省略号并添加鼠标悬浮提示

    filters: {
       
        previewBtn(value){
       
          if(value.length > 10) {
       
            let text = value.slice(0
    展开全文
  • css 文本超出省略号

    千次阅读 2019-02-22 15:55:40
    段落文字不超出几行,超出部分以省略号显示 一、div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示两行或三行,超出部分用省略号显示 ...

    段落文字不超出几行,超出部分以省略号显示

    一、div内显示一行,超出部分用省略号显示

    white-space: nowrap;//强制一行显示
    overflow: hidden;//超出的隐藏
    text-overflow: ellipsis;//省略号

    二、div内显示两行或三行,超出部分用省略号显示

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;(行数)
    /*! autoprefixer: off */(在实际项目中,我们会发现-webkit-box-orient没有生效,需要加入这个注释)
    -webkit-box-orient: vertical;

    概述

    -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

    强制换行符号(br)换行

    可以使用标签p来实现大换行,如果在一个文章里需要分段换行形式。

    使用CSS设置宽度自动换行

    连续数字或者字母换行white-space:normal; word-break:break-all;

    white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
    white-space 属性设置如何处理元素内的空白
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

    word-wrap: normal|break-word;
    word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
    normal: 只在允许的断字点换行(浏览器保持默认处理)
    break-word:在长单词或URL地址内部进行换行


    word-break: normal|break-all|keep-all;
    word-break 属性用来标明怎么样进行单词内的断句。
    normal:使用浏览器默认的换行规则。
    break-all:允许再单词内换行
    keep-all:只能在半角空格或连字符处换行

     

    展开全文
  • 文本超出省略号

    2021-08-10 23:35:00
    // 1、文本一行,超出省略号 white-space: nowrap; // 不换行 overflow: hidden; // 超出隐藏 text-overflow: ellipsis; // 超出省略号 // 2、文本一行,超出隐藏 white-space: nowrap; overflow: hidden; // 3、...
  • 单行文本超出出现省略号 首先给用于放文本的标签元素设置一个宽度值,并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..."  overflow: hidden; //先设置文本超出隐藏  text-overflow:ellipsis; //...
  • 之前设置超出显示省略号使用js做的,CSS也可以, width:100px; border:1px solid black; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 下边三行必须设置上才能生效, ...
  • 单行文本 记得添加宽度width来限定范围 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 多行文本 注意-webkit的兼容性,主要适配webkit内核浏览器和移动端 display: -webkit-...
  • 设计css样式时,遇到要使文本在一行内显示,超出则加省略号的问题解决办法: 只需要使用text-overflow和white-space来使文本在一行内显示,超出则加省略号,具体操作如下所示: 1、HTML代码 <h1>遇到要使文本...
  • 主要介绍了javascript 实现文本使用省略号替代(超出固定高度的情况)的相关资料,需要的朋友可以参考下
  • uni-app 文本超出部分省略号显示

    千次阅读 2021-07-02 15:33:39
    最近项目中用到了这个小特性,文本超出部分用省略号显示,特此记录便于日后查阅。 .content { width: 100rpx !important; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -...
  • 参考链接:... 单行文本超出 width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:inline-block; 多行文本超出 display: -webkit-box; -webk...
  • /* 超出两行省略号 */ display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; --
  • .xx{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  • 单行文本超出隐藏 css样式中必须同时设置: white-space: nowrap; //不换行 text-overflow: ellipsis; overflow: hidden; &lt;h3&gt;单行文本超出隐藏&lt;/h3&gt; &lt;div class="...
  • 小程序超出文本显示省略号 小程序中超出文本显示省略号页需要使用css设置。 首先需要使用display: -webkit-box设置盒子为弹性盒子; 使用-webkit-line-clamp: 1;设置最多可以显示多少行,我这里设置最多显示为1行 ...
  • 原文地址:https://www.cnblogs.com/xiaosuibu/p/8196067.html 代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"...
  • 参考文章 在小程序中 当我们需要设置 横向滚动 内部元素对文字...文子显示省略号 换行 代码 一行 white-space:nowrap;/*规定段落中的文本不进行换行*/ overflow:hidden;/*内容会被修剪,并且其余内容是不可见的。*
  • 微信小程序超出文本显示省略号文本内容太长超出盒子固定样式,我们可以将超出盒子的文本改成省略号。 具体WXSS样式如下所示: .xxxx { display:-webkit-box;/*设置为弹性盒子*/ overflow:hidden;/*超出隐藏*/ ...
  • 关于多行文本超出显示省略号所遇到的问题

    万次阅读 热门讨论 2018-06-14 15:12:48
    今天我遇到的一个算是简单又不简单的问题,为什么说简单呢?是因为实现思路很简单,实现方法不管是自己写也好...我所遇到的问题就是,当文本超出容器的大小时,让最后一行的文本末尾显示省略号。怎么样,听起来很简...
  • //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
  • uni-app的超出文本省略号的css写法

    千次阅读 2020-08-26 10:56:38
    /* 超出部分省略号 */ display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 3; /** 显示的行数 **...
  • css 文本超出显示省略号不起作用

    千次阅读 2020-07-16 09:04:37
    一、单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行文本显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...
  • 本方法将字符串分截成多段后以最后一行使用单行省略号实现。 提示:以下是本篇文章正文内容,下面案例可供参考 一、字符串分段 创建一个虚拟节点,循环字符串并填入节点中,节点长度与外层div节点进行比较,超出则...
  •  //设置显示省略号 text-overflow:clip; //设置及不现实省略号 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div.test { white-space:nowrap; width:12...
  • 之前每次写文本超出显示省略号的样式都是在网上百度的 这次也是 但效果没有达到预期的那样(就是失败了。。。。) 这是我百度到的代码 &lt;title&gt;文字超过两行或三行就显示省略号&lt;/title&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,983
精华内容 8,393
关键字:

文本超出省略号