赖同学


  • 首页

  • 标签

  • 分类

  • 归档

  • 站点地图

  • 留言

  • 搜索

CSS 中省略号的几种写法

发表于 February 12, 2019|分类于 css|阅读次数: –
字数统计: 843|阅读时间: 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 — 2023赖彬鸿
1.6k
载入天数...载入时分秒...
0%