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