在网页设计中，多行文本的省略显示是一个常见的需求。这不仅能够优化空间利用，还能提升用户体验。以下将详细介绍五种CSS技巧，帮助你实现多行文本的省略显示，让你的网页更加美观。

技巧一：使用overflow属性

overflow属性可以控制内容溢出的处理方式。对于多行文本，我们可以将其设置为hidden，这样超出指定容器的内容就会被隐藏。

p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

技巧二：结合line-height和max-height

通过设置line-height和max-height，我们可以控制文本的显示行数。当文本超出指定行数时，使用text-overflow属性实现省略显示。

p { line-height: 1.5; max-height: 3.75em; /* 3行文本的高度 */ overflow: hidden; text-overflow: ellipsis; } 

技巧三：使用display: -webkit-box;

针对某些浏览器，我们可以使用-webkit-box属性来实现多行文本的省略显示。这种方式可以更好地控制文本的布局。

p { display: -webkit-box; -webkit-line-clamp: 3; /* 显示3行文本 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 

技巧四：利用text-overflow: ellipsis;

text-overflow属性可以控制文本溢出的显示方式。将text-overflow设置为ellipsis，当文本超出指定宽度时，会在末尾显示省略号。

p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

技巧五：结合position属性

通过设置position: relative;和position: absolute;，我们可以将超出文本的部分隐藏。

p { position: relative; line-height: 1.5; max-height: 3.75em; /* 3行文本的高度 */ overflow: hidden; } p:after { content: "..."; position: absolute; right: 0; bottom: 0; } 

通过以上五种技巧，你可以轻松实现多行文本的省略显示，让你的网页更加美观。在实际应用中，可以根据具体需求选择合适的技巧进行组合使用。