本文目錄導(dǎo)讀：

1. 文本截?cái)?/a>
2. 行內(nèi)文本溢出顯示
3. 工具提示顯示完整文本

CSS技巧：文本溢出與顯示控制

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要控制文本顯示的部分或全部，這時(shí)就可以利用CSS來實(shí)現(xiàn)，本文將介紹如何通過CSS控制文本的顯示。

文本截?cái)?/h2>

過長時(shí)，我們有時(shí)只希望顯示部分內(nèi)容，這時(shí)可以使用CSS的text-overflow屬性來實(shí)現(xiàn)，結(jié)合overflow和white-space屬性，我們可以輕松實(shí)現(xiàn)文本的截?cái)唷?/p>

.truncate-text {
    white-space: nowrap;  /* 文本不換行 */
    overflow: hidden;     /* 隱藏超出部分 */
    text-overflow: ellipsis;  /* 超出部分用省略號表示 */
    width: 200px;        /* 設(shè)置文本寬度 */
}

行內(nèi)文本溢出顯示

超出其包含元素的高度時(shí)，我們可以使用CSS的display和overflow屬性來實(shí)現(xiàn)文本的溢出顯示。

.overflow-text {
    display: -webkit-box;  /* 作為塊級元素顯示 */
    -webkit-line-clamp: 3; /* 顯示文本的行數(shù) */
    -webkit-box-orient: vertical;  /* 文本垂直排列 */
    overflow: hidden;      /* 隱藏超出部分 */
}

工具提示顯示完整文本

對于重要的截?cái)辔谋?，用戶可能希望查看完整?nèi)容，這時(shí)，我們可以使用工具提示（tooltip）來展示完整的文本，在HTML元素上添加title屬性，當(dāng)用戶鼠標(biāo)懸停時(shí)，就會顯示完整的文本。

<p class="truncate-text" title="這是完整的文本">這是被截?cái)嗟奈谋尽?lt;/p>

利用CSS的文本控制屬性，我們可以靈活地控制文本的顯示，無論是截?cái)?、溢出顯示還是工具提示，都能幫助我們更好地展示和處理文本內(nèi)容，在實(shí)際應(yīng)用中，我們可以根據(jù)需求選擇適合的顯示方式。