css一段文字溢出隐藏

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中,我们常常需要对一段文字进行溢出隐藏的操作,即当文字内容超出了其容器的大小时,只显示容器内的内容,其他部分自动隐藏,以保证页面布局整洁美观。实现这样的效果,我们可以采用CSS的overflow

CSS中,我们常常需要对一段文字进行溢出隐藏的操作,即当文字内容超出了其容器的大小时,只显示容器内的内容,其他部分自动隐藏,以保证页面布局整洁美观。

实现这样的效果,我们可以采用CSS的overflow属性。overflow属性可以控制一个容器的超出部分如何处理,其属性值包括:

overflow: visible;//默认值,内容溢出时不做任何处理
overflow: hidden;//内容溢出时,超出部分将被隐藏
overflow: scroll;//内容溢出时,容器会出现滚动条以承载多余内容
overflow: auto;//默认值,根据内容是否溢出自动选择hidden或scroll 

下面,我们来看一个应用实例,让div容器内的文字内容只显示2行,并超出部分隐藏:

html:
<div class="text">
  <p>这是一段需要进行溢出隐藏的文字这是一段需要进行溢出隐藏的文字这是一段需要进行溢出隐藏的文字这是一段需要进行溢出隐藏的文字这是一段需要进行溢出隐藏的文字这是一段需要进行溢出隐藏的文字</p>
</div>

css:
.text {
  width: 200px;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.text p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
} 

上述代码中,text类是指定容器div的样式,其中overflow:hidden用于超出部分隐藏,width和height用于指定容器div的宽度和高度,line-height用于设置每行文字的行高。

text p是指定p标签的样式,其中white-space: nowrap用于关闭自动换行,text-overflow: ellipsis用于在内容过长时在末尾显示省略号,overflow:hidden用于超出部分隐藏。

在上述代码中,我们还使用了white-space和text-overflow属性,white-space属性用于关闭自动换行,text-overflow属性用于指定如何处理文字内容过长的情况。

以上就是CSS实现文本溢出隐藏的详细介绍,希望对您有所帮助。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css一段文字溢出隐藏

粉丝

0

关注

0

收藏

0

已有0次打赏