1 單行文本過(guò)長(zhǎng)打點(diǎn)
只有1行文本時(shí)，需要滿足如下條件：
- 文本需要有寬度。當(dāng)設(shè)置了寬度時(shí)，文本過(guò)長(zhǎng)才會(huì)超出該寬度，所以文本的元素應(yīng)該是塊級(jí)元素（行內(nèi)元素寬度、高度都會(huì)失效）。
- 不換行顯示。單行文本無(wú)需換行。
- 超出部分隱藏。文本超出寬度的部分，需要隱藏顯示。
- 文本超出打點(diǎn)。
示例代碼：
<div>超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本</div>
<style>
div {
/* 設(shè)置寬度，如果文本內(nèi)容長(zhǎng)短不一，可以設(shè)置max-width最大寬度顯示，小于最大寬度不會(huì)打點(diǎn) */
width: 200px;
/* 文本不會(huì)換行顯示 */
white-space: nowrap;
/* 超出盒子部分隱藏 */
overflow: hidden;
/* 文本超出的部分打點(diǎn)顯示 */
text-overflow: ellipsis;
}
</style>
2 多行文本打點(diǎn)顯示
示例代碼：
<div>超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本超長(zhǎng)文本</div>
<style>
div {
/* 設(shè)置寬度原因：讓文本寬度超過(guò)200px時(shí)換行顯示 */
width: 200px;
/* 不同瀏覽器有不同的前綴，比如-moz-box */
display: -webkit-box;
/* 子元素的排列方式：垂直排列 */
-webkit-box-orient: vertical;
/* 設(shè)置3行文本之后打點(diǎn)顯示 */
-webkit-line-clamp: 3;
/* 超出盒子部分隱藏顯示 */
overflow: hidden;
}
</style>
3 涉及的屬性
3.1 white-space
white-space屬性是用來(lái)設(shè)置如何處理元素中的空白，其屬性值如下所示：
| 屬性值 | 說(shuō)明 |
|---|---|
normal |
默認(rèn)屬性，多個(gè)空白連續(xù)符會(huì)被合并成1個(gè)顯示 |
nowrap |
多個(gè)連續(xù)空白符會(huì)合并成1個(gè)顯示，文本不會(huì)換行，直到遇到<br/>為止 |
pre |
多個(gè)連續(xù)空白會(huì)被保留，文本不會(huì)換行，直到遇到<br/>為止 |
pre-wrap |
多個(gè)連續(xù)空白會(huì)被保留，會(huì)自動(dòng)換行 |
pre-line |
多個(gè)連續(xù)空白符會(huì)合并成1個(gè)顯示，會(huì)自動(dòng)換行 |
3.2 text-overflow
text-overflow屬性用來(lái)確定如何提示隱藏的溢出內(nèi)容，其形式可以是裁剪、顯示一個(gè)省略號(hào)（“…”）或顯示一個(gè)自定義字符串，其屬性值如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-611446.html
| 屬性值 | 說(shuō)明 |
|---|---|
clip |
默認(rèn)值，在內(nèi)容區(qū)的極限處截?cái)辔谋?/td> |
ellipsis |
在內(nèi)容區(qū)的極限處以省略號(hào)（…）來(lái)顯示 |
<string> |
使用給定的字符串來(lái)代替被修剪的文本（只在firefox瀏覽器有效） |
text-overflow屬性并不會(huì)強(qiáng)制溢出，所以需要搭配額外的屬性：overflow和white-space，例如：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-611446.html
white-space: nowrap;
overflow: hidden;
到了這里，關(guān)于CSS控制文本超出打點(diǎn)顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)2（HTML5、CSS3、JavaScript ）格式化文本標(biāo)記，定義列表，＜blockquote＞，definition description，ruby——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/753184-1.png)
