CSS 設置文字超出元素時用省略號…顯示

時間 2020-05-21

標籤 css 設置文字超出元素省略號顯示欄目 CSS 简体版

原文原文鏈接

CSS 設置文字超出元素時用省略號…顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.con{
				width: 200px;
				height: 50px;
				border: 1px solid black;
			}
			b{
                /* 設置爲 塊元素*/
				display:block;		
                /* white-space 屬性設置如何處理元素內的空白, nowrap 規定不換行，且忽略其中的空白符*/
				white-space:nowrap; 
				overflow:hidden; 
				text-overflow:ellipsis;
                /* 以上三個屬性 缺一不可*/
			}
		</style>
	</head>
	<body>
		<div class="con">
			<b>這一行用於測試文字超過容器寬度的省略狀況</b>
		</div>
	</body>
</html>

CSS white-space 屬性

設置如何處理元素內的空白（好比空格和換行符）。javascript

值	描述
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行爲方式相似 HTML 中的 `<pre>` 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 `<br>` 標籤爲止
pre-wrap	保留空白符序列，可是正常地進行換行。
pre-line	合併空白符序列，可是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

<html>
<head>
    <style type="text/css">
        /* 規定段落中的文本不進行換行*/
   		 p{	white-space: nowrap; }
    </style>
</head>
<body>
    <p>
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
        這是一些文本。
    </p>
</body>
</html>

CSS3 text-overflow 屬性

規定當文本溢出包含元素時的處理效果css

值	描述
text-overflow: clip	修剪文本
text-overflow: ellipsis	顯示省略符號來表明被修剪的文本
text-overflow: string	使用給定的字符串來表明被修剪的文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.con{
				width: 200px;
				height: 30px;
			}
			b{
				display:block;		/* 設置爲 塊元素*/
				white-space:pre;    /* white-space 屬性 pre 會將空白一同算做文本*/
				overflow:hidden; 
				text-overflow:ellipsis;
			}
			b:hover{
				/* 設置 鼠標移動在文字上面，自動顯示所有內容*/
				overflow: visible;
				text-overflow:inherit;
			}	
		</style>
	</head>
	<body>
		<div class="con">
			<b>這一行用於測試文字超過這一行用於測試文字超過</b>
		</div>
	</body>
</html>

經常使用功能：點擊查看和收起內容詳情

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.con{
				width: 200px;
				height: 30px;
			}
			b{
				display:block;		/* 設置爲 塊元素*/
				white-space:pre;    /* white-space 屬性 pre 會將空白一同算做文本*/
				overflow:hidden; 
				text-overflow:ellipsis;
			}
			.btn{
				border: 0;
				background: red;
				color: whitesmoke;
			}
		</style>
	</head>
	<body>
		<div class="con">
			<b>這一行用於測試文字超過這一行用於測試文字超過</b>
		</div>
		<button class="btn" onclick="func_button_more()">更多</button>
		<button class="btn" onclick="func_button_hold()">收起</button>
	</body>
</html>
<script type="text/javascript">
	function func_button_more(){
		var con_b = document.getElementsByTagName("b")[0]
        /* 設置 overflow:visible; 顯示所有內容*/
		con_b.setAttribute("style","overflow:visible;")
	}
	function func_button_hold(){
		var con_b = document.getElementsByTagName("b")[0]
		con_b.setAttribute("style","overflow:hidden;")
	}
</script>

設置 td 單元格內容超出後用省略號...表示

若是是在 td 單元格實現超出文本用省略號顯示的效果，須要在以上的基礎上再加 table 的 CSS 屬性 table-layout: fixed。html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.con{
				width: 100px;
				margin: 50px;
				background: red;
				display: table;		/* 將 div 轉換成了 表格table*/
				table-layout: fixed;  /* 此屬性規定，列寬由表格table的列寬度設定*/
				}
			.container{
				width: 100px;
				height:40px;
				border: 1px solid black;
				display: table-cell;	 	 /*同時造成了 BFC*/ 
				vertical-align: middle;  /*垂直居中*/
				text-align: center;		 /*水平居中*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div class="con">
			<div class="container">
			aaaaaaaaaaaaaaaaa
			aaaaaaaaaaaaaaaa
			</div>
			<div class="container">
				b
			</div>
			<div class="container">
				c
			</div>
		</div>
		
	</body>
</html>

CSS table-layout 屬性

規定 table 表格的佈局算法java

值	描述
automatic	默認。列寬度由單元格內容設定
fixed	列寬由表格寬度和列寬度設定
inherit	規定應該從父元素繼承 table-layout 屬性的值