css控制文本内容溢出截断

css控制文字内容的溢出显示,溢出截断后末尾出现省略 ... ,单行文本与多行文本的控制又有区别。

单行文本

1
2
3
4
5
.text {
overfolw: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

多行文本

1
2
3
4
5
6
.text {
display:-webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

知识点

text-overflow 确定内容的溢出显示,可以被剪切(clip)、显示一个省略号(...)或者显示一个自定义字符串。

  • 需要设置 overflow: hidden 属性才能生效,否则不会强制溢出事件发生。
  • 属性只对块级元素溢出的内容有效,但必须与块级元素内联( inline )方向一致。如内容在盒子下方溢出,则属性不会生效。
  • 文本溢出:1、文本无法换行,设置了 white-space: nowrap; 。2、单词太长。
1
text-overflow: [ clip | ellipise | <string> ]{1, 2}
  1. clip: 内容区域的极限处截断文本,因此可能在字符的中间可能会发生截断。为了能够在两个字符过度处截断,必须使用一个空字符串值(
  2. ellipse: 用省略号...来表示截断的文本。如果空间太小连省略号也不能显示,那么省略号也会被截断。
  3. <string>: <string>用来表示被截断的文本。字符串内容将被添加在内容区域中,所以会减少显示出的文本。如果空间太小到连省略号的容纳下,那么这个字符串也会被截断。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Overflow behavior at line end
Right end if ltr, left end if rtl */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

/* Overflow behavior at left end | at right end
Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;



















































































































CSS value direction: ltr direction: rtl
Expected Result Live result Expected Result Live result
visible overflow 1234567890

1234567890


0987654321

1234567890


text-overflow: clip t-o_clip.png

123456


t-o_clip_rtl.png

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



# CSS

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×