單行和多行文本出現省略號的實現

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章