单行和多行文本出现省略号的实现

1.CSS部分 

    /*单行文本出现省略号*/
	.div3{
		width: 100px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	/*多行文本出现省略号*/
	.div4{
		width: 100px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

    

2.HTML

    <div class="div3">
		卡士大夫快乐圣诞节饭<br>
		alsdfjlk 
	</div>
	<div class="div4">
		劳动力会计法<br>
		了肯德基阿斯利康<br>
		来得快萨福克
	</div>

猜你喜欢

转载自blog.csdn.net/qq_33221699/article/details/84141857
今日推荐