前端文本溢出隐藏问题

不断蜕变灬青春

已于 2023-04-12 11:53:17 修改

阅读量329

点赞数

分类专栏： CSS 文章标签： css 前端 css3

于 2023-04-12 11:08:19 首次发布

本文链接：https://blog.csdn.net/b1841630/article/details/130101933

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS解决文本溢出隐藏的问题，对于单行文本，可以通过white-space,overflow和text-overflow属性来实现，多行文本则结合display:-webkit-box,-webkit-line-clamp和-webkit-box-orient属性进行设置。建议将这些样式定义在全局样式文件中，需要时直接引用，并可通过tooltip组件查看完整内容。

摘要由CSDN通过智能技术生成

文本溢出隐藏问题

单行文本溢出隐藏

// 块级元素生效，不是块级的话可加display: block; 进行设置
.single_line {
	white-space:nowrap; // 超出容器宽度不换行
	overflow:hidden; // 超出容器部分隐藏
	text-overflow:ellipsis; // 溢出部分以...的形式展示
}

多行文本溢出隐藏

.multi_line {
    overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	-webkit-box-orient: vertical; /*设置对齐模式*/
  	-webkit-line-clamp: 2; /*设置多行的行数，示例为2行，如有需求可以设置显示多少行*/
}