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 属性的值

Reference

W3C | CSS3 text-overflow 属性算法

W3C | CSS white-space 属性浏览器

关于文字内容溢出用点点点(…)省略号表示wordpress

解决text-overflow: ellipsis;不生效的问题布局

CSS table-layout 属性测试