【总结】文本超出显示省略号

最新推荐文章于 2024-10-02 09:25:25 发布

原创最新推荐文章于 2024-10-02 09:25:25 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客探讨了CSS中处理文本溢出的方法，包括单行文本的`white-space`, `overflow`和`text-overflow`属性，以及多行文本的私有属性如`-webkit-line-clamp`。还介绍了使用双重伪元素和`linear-gradient`背景来优雅地隐藏和显示多余内容的技巧。

单行文本

		<selector>{
	    	white-space: nowrap;
	    	overflow: hidden;
	    	text-overflow: ellipsis;
	    }

多行文本

私有属性

		p{
			background-color: #f9e9cd;
			overflow:hidden;
			display: -webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:5;
		}

双重伪元素

 		p{
        	overflow: hidden;
        	position: relative;
        	background-color: #f9e9cd;
        	text-align: justify;
        	padding-right: 1rem
        }
        p::before{
        	position:absolute;
        	content: "...";
        	right: 0;
        	bottom: 0;
        }
        /*当不需要省略号的时候  覆盖住省略号 使用和背景色一直的背景色*/
        p::after{
        	content: "";
        	position:absolute;
        	width: 1rem;
        	height: 1rem;
        	background-color:red;
        	right: 0;
        	display: inline;
        	margin-top: .5rem
        }

linear-gradient

		p{
			overflow: hidden;
			text-align: justify;
			position: relative;
		}
		// 给伪类元素设置 linear-gradient 用和背景色相似的渐变来覆盖文字
		// 宽度 高度 边距等 看具体情况 调节大小位置
		p::after{
			content: "";
			position:absolute;
			height: 1.2rem;
			width: 20%;
			background:linear-gradient(to right, rgba(255,255,255,0), skyblue 80%);
			right: 0;
			bottom: 0;
			margin-bottom: .2rem
		}