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 属性
设置如何处理元素内的空白（比如空格和换行符）。
| 值 | 描述 |
|---|---|
| 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 属性
规定当文本溢出包含元素时的处理效果
| 值 | 描述 |
|---|---|
| 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。
<!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 表格的布局算法
| 值 | 描述 |
|---|---|
| automatic | 默认。列宽度由单元格内容设定 |
| fixed | 列宽由表格宽度和列宽度设定 |
| inherit | 规定应该从父元素继承 table-layout 属性的值 |