精华内容
下载资源
问答
  • 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 文本溢出显示省略号

    万次阅读 2019-04-04 14:09:21
    1. 单行溢出 使用text-overflow属性,并且要加width宽度属性 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2. 多行溢出 1. WebKit内核和移动端的浏览器,使用CSS扩展属性 ``` display: -webkit...

    1. 单行溢出

    使用text-overflow属性,并且要加width宽度属性

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

    2. 多行溢出

    1. WebKit内核和移动端的浏览器,使用CSS扩展属性

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

    注:

    • -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性。

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

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

    • 非webkit内核浏览器

    2. 其他浏览器

    • 使用clamp.js插件 |下载地址:https://github.com/josephschmitt/Clamp.js
    • 用法:$clamp(node,options);
      node是要操作的节点
      options包括:
      1.clamp(数字|字符串|’auto’):行数
      2.useNativeClamp(Boolean): 是否使用原生的 -webkit-line-clamp 属性在 支持的浏览器中。 默认是true 。如果你使用的是 Webkit 内核的浏览器,但是在某些情况下,显示不正常。你可以把这个值设置为false,使用基于js的实现方式
      3.truncationChar (String):在HTML元素截断之后显示的字符串,默认是省略号(…)。同时支持 字符串和HTML标签。
      4.truncationHTML:在 “truncationChar” 之前显示的 HTML 字符串。同时支持 字符串和HTML标签。
      5.animate (Boolean)是否实现动画折叠,当设置为true的时候动态的移除多余的字符,直到合适的省略效果。
    • 实例:
      1.p标签有ID属性
      var node=document.getElementById("chuli");
      $clamp{node,{clamp:2}}
      2.p标签有class属性
      var module = document.getElementsByClassName('P')
         for(var i = 0;i<module.length;i++){
             $clamp(module[i]),{
                 clamp:'2'
             }
         }
      
    展开全文
  • css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容) <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <...

    css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容)

    <template>
      <div>
        <!--单行文本溢出  -->
        <h2>单行文本溢出</h2>
        <div class="box1">
          <ul>
            <li title="全部内容展示:文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1">
              文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1
            </li>   
          </ul>
        </div>
    
        <!-- 多行文本溢出 -->
        <h2>多行文本溢出</h2>
        <div class="box2">
          <ul>
            <li title="全部内容展示: 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2">
              文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style>
    .box1 ul {
      width: 200px;
    }
    
    .box1 ul li {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    .box2 ul {
      width: 200px;
    }
    
    .box2 ul li {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
    </style>
    

    在这里插入图片描述

    展开全文
  • 1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; ...

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

    单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可。

    	<style>
    	.single-line {
    	  width: 200px;
    	  line-height: 1.4;
    	  white-space: nowrap;
    	  overflow: hidden;
    	  text-overflow: ellipsis;
    	}
    	</style>
        
        <div class="single-line">
          士为知己者死。
    	</div>
    	<div class="single-line">
          世上本没有路,走的人多了,也便成了路。
    	</div>


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

    实现的思路是先设置外层容器,限定要显示的高度。实际显示内容放到内层元素上。
    1)接下来添加省略号,基于外层容器设置为绝对定位,显示在外层容器右下角。这样显示区域右下角会存在省略号。
    2)添加和省略号大小一样的空白区域,基于内层元素设置为决定定位,显示在实际内容右下角。当内容未溢出时,空白会覆盖省略号。
    3)前面设置完后,内容刚好能放下时,外层容器右侧会出现一小块空白。
        在内容元素内部后面加上一个和省略号一个大小的空白区域。这样当内容刚好能容下时,这个空白区域会被推倒下一行,2)中的空白区域也会向下移一行,省略号得以保留。

    	<style>
    	.multiple-line-wrapper, .multiple-line, .multiple-line .empty-space {
    	  display: inline-block;
    	}
    	.multiple-line-wrapper {
    	  display: inline-block;
    	  line-height: 1.4em;
    	  max-height: 2.6em; /* 1.4em * (N - 1) + 1em + (0.4em / 2)。N为要显示的行数,1.4em为行高 */
    	  position: relative;
    	  overflow: hidden;
    	  width: 200px;
    	}
    	
    	
    	 /*
    	 ==》存在小问题:
    	 1、刚好能显示下时会显示省略号
    	 2、省略号和文字交接的地方存在有一根亮黄的线
        */
    	.multiple-line-wrapper:after, .multiple-line:after {
    	  position: absolute;
    	  right: 0;
    	  bottom: 0;
    	  display: inline-block;
    	  width: 1em;
    	  height: 1.4em;
    	  background: white;
    	}
    	.multiple-line-wrapper:after {
    	  content: '...'; 
    	}
    	.multiple-line {
    	  position: relative;
    	}
    	 /*设置和省略号宽度一样。*/
    	.multiple-line .empty-space {
    	  width: 1em;
    	}
    	 /*要比外层的层级来得大*/
    	.multiple-line:after { 
    	  content:'  ';
    	  z-index: 10;
    	}
        </style>
    	<span class="multiple-line-wrapper">
    	  <span class="multiple-line">
    	   志向不过是记忆的奴隶,生气勃勃地降生。
    	   <span class="empty-space"></span>
    	  </span>
        </span>
    	<br/>
    	
        <span class="multiple-line-wrapper">
    	  <span class="multiple-line">
    	   志向不过是记忆的奴隶,生气勃勃地降生。但却很难。
    	   <span class="empty-space"></span>
    	  </span>
        </span>
    	<br/>
    	
        <span class="multiple-line-wrapper">
    	  <span class="multiple-line">
    	   志向不过是记忆的奴隶,生气勃勃地降生,但却很难成长。
    	   <span class="empty-space"></span>
    	  </span>
        </span>
    	<br/>

     

    实际运行效果大致所示:
    1)未溢出时实际效果如下,没有显示省略号。因为空白块覆盖了省略号。

    2)刚刚好能显示时,实际效果如下,右下角有省略号。因为外部容器的绝对定位空白块被推到了下一行

    3)溢出时,实际效果如下,右下角有省略号。

    这个方案虽然能够解决,但是也存在一些小问题:
     1)刚好能显示下时会显示省略号
     2)省略号和文字交接的地方存在有一根亮黄的线
     3)不能给外部容器.multiple-line-wrapper和内部元素.multiple-line设置padding。如果需要padding值,可以在.multiple-line-wrapper外部再嵌套元素,在嵌套元素上设置。或者用margin替代

    展开全文
  • 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略 </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 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

    展开全文
  • 主要介绍了css实现文本溢出显示省略号的方法和示例分享,推荐给大家。
  • 需求: ie下多行文本超出隐藏显示省略号 解决方案:float布局 代码: html: <div class="fix-height"> <div class="text">这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字...
  • 小程序文本溢出显示省略号 .text{ width: 100%;height: 40%; line-height: 32px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical;...
  • /*单行溢出,显示省略号,用text-overflow属性,需要增加宽度*/ /*溢出隐藏*/ overflow: hidden; /*隐藏的部分用...表示*/ text-overflow: ellipsis; /*文字不能转行*/ white-space: nowrap; width: 244px; ...
  • 可以设置文本溢出显示省略号 ~~~ .wrap{ width: 200px; // 文字容器宽度 overflow: hidden; // 超出边框外隐藏 text-overflow:ellipsis; // 属性规定当文本溢出包含元素时发生的事情。 white-space: nowrap; /...
  • 用text-overflow:ellipsis属性来实现单行文本溢出显示省略号(…)。 css 代码: p{ width:100px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; /*省略号*/ ...
  • 文章目录一、溢出属性(overflow)二、空余空间(white-space)三、省略号显示(text-overflow)三、单行文本溢出时显示省略号四、多行文本溢出时显示省略号总结 一、溢出属性(overflow) overflow:visible/hidden...
  • 一、css常规方法: (一)、单行文本 p{ width:100px; overflow: hidden; /*超出部分隐藏*/ ... /*省略号*/ } (二)、多行文本 1、在WebKit浏览器或移动端 在WebKit浏览器或移动端(绝大部分是...
  • 单行溢出显示省略号: 多行文本溢出显示省略号
  • 单行文本溢出显示省略号 width: 140px; //宽度必须要加上 white-space: nowrap; //不换行 overflow: hidden; text-overflow: ellipsis; //省略号“…”隐藏超出范围的文本 display: inline-block; //如果不是行内...
  • 实现多行文本溢出显示省略号的两种方法 ok,这是本菇凉的第一篇博客( •̀ ω •́ )✧ 刚毕业涉世未深的小女孩在如今这个信息爆炸的时代,看到行业那么多“大牛”、大神“、“大佬”等大大们,可以说是相(瑟)当...
  • 效果图 <div id="goodIntroduction"> 在漫无边际的海水上漂流,偶尔抬头能看见熟悉的日月星辰。因为我不知道下辈子是否还能遇见你,所以我今生才会那么努力把最好的给你。 陪伴,是最长情的告白;...
  • 1、文本溢出显示省略号 2、鼠标浮动查看全部内容 1、文本溢出显示省略号 今天做项目时遇到一种需求:文本溢出截断省略,上网查阅了一下,还是挺简单的,但是考虑到自己疑似老年痴呆的大脑,就在这里整理一下,以...
  • style代码如下: .BK_bg{ width: 750px; height: 700px; background-color: ...结果文字部分的省略号没有显示出来 后面发现是因为把.content p中的display设置成了block 删除display:block就可以生效了
  • 如果实现单行文本溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
  • html5多行文本溢出显示省略号

    千次阅读 2020-03-04 15:25:10
    段落文字太多显示不下时,可通过下面的样式解决 下面就是解决的示例
  • 1、元素必须要有宽度 width: value; 2、需要强制文本在一行显示 white-space: nowrap; 3、实现溢出内容裁剪不显示 overflow: hidden; 4、显示省略号 text-overflow: ellipsis;
  • 4种方法实现单行、多行——文本溢出显示省略号一、单行溢出在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码:显示效果:二、那么多...
  • 组件 <!-- * @Descripttion: el-tooltip重新封装 * @version: 1.0 * @Author: keyu * @Date: 2020-07-05 10:28:45 * @LastEditTime: 2020-07-05 11:46:56 --> <template>... :content=

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,152
精华内容 6,460
关键字:

文本溢出显示省略号