1. 程式人生 > >單行和多行文字出現省略號的實現

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

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>