HTML中限制字數顯示

HTML中限制字數顯示,超出部分使用省略號顯示

在HTML中,爲了保證頁面整潔,需要隱藏超出部分的文本,例如列表項、標題等。如下爲幾種解決方法:

代碼實現

文字只允許顯示一行,省略超出部分,顯示“…”

在CSS文件中可以添加下述公共樣式:

.line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; //文本不換行,這樣超出一行的部分被截取,顯示...
}

在HTML中可以使用該樣式:

<div class="item">
    <p class="line-limit-length">解決Ubuntu18.04下MySQL只能使用sudo連接噠噠噠噠噠噠多多多多多多多多多多多多多多的點點滴滴</p>
</div>

給容器限制寬度,超出部分省略

在CSS文件中添加下述:

.product-buyer-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

使用方法和上一種一樣。

顯示效果

顯示效果大致如下,該效果是美化後的顯示效果:

在這裏插入圖片描述

總結及進階

歸納起來設置的樣式參數主要是三個:

  • overflow: 用於控制內容溢出元素框時顯示的方式。

  • text-overflow: 確定如何向用戶發出未顯示的溢出內容信號。

  • white-space: 用來設置如何處理元素中的空白。

overflow

CSS overflow 屬性用於控制內容溢出元素框時顯示的方式;可以控制內容溢出元素框時在對應的元素區間內添加滾動條;overflow屬性有以下值:

描述
visible 默認值。內容不會被修剪,會呈現在元素框之外。
hidden 內容會被修剪,並且其餘內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

text-overflow

確定如何向用戶發出未顯示的溢出內容信號。它可以被剪切,顯示一個省略號(’…’,U + 2026 HORIZONTAL ELLIPSIS)或顯示一個自定義字符串。幾種樣式顯示效果如下:

在這裏插入圖片描述

幾種示例情況如下:

CSS value direction: ltr direction: rtl
預期結果 實際結果 預期結果 實際結果
visible overflow 1234567890 1234567890 0987654321 1234567890
text-overflow: clip 在這裏插入圖片描述 123456 在這裏插入圖片描述 1234567890
text-overflow: '' 12345 123456 54321 1234567890
text-overflow: ellipsis 1234… 1234567890 …4321 1234567890
text-overflow: '.' 1234. 1234567890 .4321 1234567890
text-overflow: clip clip 123456 1234567890 654321 1234567890
text-overflow: clip ellipsis 1234… 1234567890 6543… 1234567890
text-overflow: clip '.' 1234. 1234567890 6543. 1234567890
text-overflow: ellipsis clip …3456 1234567890 …4321 1234567890
text-overflow: ellipsis ellipsis …34… 1234567890 …43… 1234567890
text-overflow: ellipsis '.' …34. 1234567890 …43. 1234567890
text-overflow: ',' clip ,3456 1234567890 ,4321 1234567890
text-overflow: ',' ellipsis ,34… 1234567890 ,43… 1234567890
text-overflow: ',' '.' ,34. 1234567890 ,53. 1234567890

white-space

white-space CSS 屬性是用來設置如何處理元素中的空白。參數說明如下:

normal

連續的空白符會被合併,換行符會被當作空白符來處理。填充line盒子時,必要的話會換行。

在這裏插入圖片描述

nowrap

和 normal 一樣,連續的空白符會被合併。但文本內的換行無效。

在這裏插入圖片描述

pre

連續的空白符會被保留。在遇到換行符或者元素時纔會換行。

在這裏插入圖片描述

pre-wrap

連續的空白符會被保留。在遇到換行符或者元素,或者需要爲了填充line盒子時纔會換行。

在這裏插入圖片描述

pre-line

連續的空白符會被合併。在遇到換行符或者<br>元素,或者需要爲了填充line盒子時會換行。

在這裏插入圖片描述

break-spacespre-wrap的行爲相同,除了:

  • 任何保留的空白序列總是佔用空間,包括在行尾。

  • 每個保留的空格字符後都存在換行機會,包括空格字符之間。

  • 這樣保留的空間佔用空間而不會掛起,從而影響盒子的固有尺寸(最小內容大小和最大內容大小)。

在這裏插入圖片描述

下面的表格總結了各種 white-space 值的行爲:

換行符 空格和製表符 文字轉行
normal 合併 合併 轉行
nowrap 合併 合併 不轉行
pre 保留 保留 不轉行
pre-wrap 保留 保留 轉行
pre-line 保留 合併 轉行
break-spaces 保留 保留 轉行

【參考鏈接】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章