css設置一行字顯示不完隱藏的方法

這篇文章主要介紹了css設置一行字顯示不完隱藏的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的網站設計制作、成都做網站經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站策劃后付款的網站建設流程，更有思茅免費網站建設讓你可以放心的選擇與我們合作。

css中可利用overflow屬性來設置一行字顯示不完就隱藏；只需給文字的盒子元素添加“overflow:hidden;”樣式，設置當內容溢出元素框時，將文字內容修剪，且溢出部分不可見即可。

在css中，可以通過“overflow:hidden;”樣式來設置。

代碼：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 200px;
				border: 1px solid red;
				white-space: nowrap;
			}
			.gdou {
				
				background: pink;
				text-overflow: ellipsis;
				overflow: hidden;
				
			}
		</style>
	</head>

	<body>
		<div>
			這一行很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的。
		</div><br />
		<div class='gdou'>
			這一行很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的。
		</div>
	</body>

</html>

效果圖：

css設置一行字顯示不完隱藏的方法