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-spaces
與 pre-wrap
的行爲相同,除了:
-
任何保留的空白序列總是佔用空間,包括在行尾。
-
每個保留的空格字符後都存在換行機會,包括空格字符之間。
-
這樣保留的空間佔用空間而不會掛起,從而影響盒子的固有尺寸(最小內容大小和最大內容大小)。
下面的表格總結了各種 white-space 值的行爲:
換行符 | 空格和製表符 | 文字轉行 | |
---|---|---|---|
normal |
合併 | 合併 | 轉行 |
nowrap |
合併 | 合併 | 不轉行 |
pre |
保留 | 保留 | 不轉行 |
pre-wrap |
保留 | 保留 | 轉行 |
pre-line |
保留 | 合併 | 轉行 |
break-spaces |
保留 | 保留 | 轉行 |
【參考鏈接】