css文本的超出以...隐藏显示

最新推荐文章于 2024-05-16 20:30:03 发布

lyy2665624982

最新推荐文章于 2024-05-16 20:30:03 发布

阅读量429

点赞数 11

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_56276571/article/details/136191416

版权

1、html代码：

	<div class="centent-box">
			内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分
		</div>

2、css样式：

/* 字体内容容器 */
		.centent-box{
				width: 200px; /* 固定宽度超出隐藏 */
				border: 1px solid red;
				overflow: hidden;  /*  超出隐藏 */
				text-overflow: ellipsis;   /*  超出以 ...显示 */
				display: -webkit-box;  
				-webkit-line-clamp: 1;  /* // 显示1行 */
				-webkit-box-orient: vertical; 
		}

最后运行效果图：