css文字超出div隱藏剩下內容並顯示省略號

小呀麼小程式設計師發表於2018-11-08
CSS

單行文字

<style>
    .test {
		width: 300px;
		height: 30px;
		line-height: 30px;
		border: 1px solid black;
		white-space: nowrap;//強制在單行顯示
		overflow: hidden;
		text-overflow: ellipsis;//關鍵
    }
</style> 
<body> 
<div class="test"> 
  <span>這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容這裡是文字內容</span> 
</div> 
</body>

效果圖
在這裡插入圖片描述
多行文字(火狐沒效果)

<style>

	.children-school-content{
		width: 195px;
		font-size: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;   
	}
</style>
<body>
     <div>
        <p class="children-school-content">胡那英據了哈哈很快恢復喝咖啡很簡單回覆肯定會很深刻的劃分空間的喝咖啡和空間的劃分哈薩克返回看得見可適當減肥後肯定會發空間哈薩克發動機後方可恢復開放解餓哦就我幾個幾個瞭解</p>
    </div>
</body>

效果圖：
在這裡插入圖片描述
相容火狐寫法，使用偽元素。

<style>
	ul {
		width: 300px;
		margin: 40px auto;
		padding: 12px 4px 12px 24px;
		border: 1px solid #eee;
	}
	li { 
		margin: 12px 0;
	}
	li a {
		display: block;
		width: 81px;
		overflow: hidden;/*注意不要寫在最後了*/
		white-space: nowrap;
		color: #000;
	}
 
	li:not(p) {
		clear: both;
	}
	li:not(p) a {
		max-width: 170px;
		float: left;
	}
	li:not(p):after {
		content: "...";
		float: left;
		width: 27px;
		padding-left: 5px;
		color: #000;
	}
</style>
</head>
 
<body>
 
<ul>
<li><a href="#">這裡是文字內容</a></li>
<li><a href="#">這裡是文字內容</a></li>
<li><a href="#">這裡是文字內容</a></li>
<li><a href="#">這裡是文字內容</a></li>
<li><a href="#">這裡是文字內容</a></li>
<li><a href="#">這裡是文字內容</a></li>
<li><a href="#">這裡是文字內容</a></li>
</ul>
 
</body>

效果圖：
在這裡插入圖片描述

相關文章