赖同学


  • 首页

  • 标签

  • 分类

  • 归档

  • 站点地图

  • 留言

  • 搜索

CSS 中省略号的几种写法

发表于 February 12, 2019|分类于 css|阅读次数: –
字数统计: 846|阅读时间: 5 min

CSS 中省略号的几种写法

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>省略号的四种写法</title>
    <style>
      p {
        width: 80%;
        margin: auto;
      }

      .prg {
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

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

		text-overflow
		规定当文本溢出包含元素时发生的事情 默认值为 clip
		clip 修剪文本
		elipsis 显示省略符号来代表被修剪的文本
		string 使用给定的字符串来代表被修剪的文本	
		*/

      .prg1 {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 60px;
        line-height: 20px;
      }

      .prg1::after {
        content: '...';
        padding-left: 3px;
        position: absolute;
        top: 20px;
        left: 0;
        display: block;
        height: 20px;
        width: 20px;
        background: #fff;
      }

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

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

  <body>
    <h3>单行省略...</h3>
    <p class="prg">
      前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
    </p>

    <h3>多行省略...</h3>
    <p class="prg1">
      前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
    </p>

    <h3>多行省略...</h3>
    <p class="prg2">
      前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
    </p>

    <h3>多行省略...</h3>
    <p class="prg3">
      前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
    </p>
  </body>
  <script>
    (function (w) {
      const shortLine = function (pragrafsClass, number) {
        const prgs = document.getElementsByClassName(pragrafsClass);
        for (let i = 0; i < prgs.length; i++) {
          let contents = prgs[i].textContent;
          if (contents.length >= number) {
            let strs = contents.slice(0, number);
            prgs[i].textContent = strs + '...';
          }
        }
      };
      w.shortLine = shortLine;
    })(window);
    window.shortLine('prg3', 18);
  </script>
</html>
css
Redux 的几个核心函数源码
JavaScript设计模式——发布-订阅模式
  • 文章目录
  • 站点概览
  1. 1.CSS 中省略号的几种写法
© 2018 — 2025赖彬鸿
载入天数...载入时分秒...
0%