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