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-spaces與 pre-wrap的行爲相同，除了：

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

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

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

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

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

【參考鏈接】

• css限制顯示字數，文字長度超出部分用省略號表示
• CSS 佈局 - Overflow
• text-overflow
• white-space