css两行溢出自动省略

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

CSS是一种用于网页设计的样式表语言。它可以控制网页中各种元素的外观和布局。在CSS中,我们可以通过一些属性来控制文本的显示效果,例如:字体大小、颜色、粗细、间距等等。但是,当文本长度超过了容器的宽度

CSS是一种用于网页设计的样式表语言。它可以控制网页中各种元素的外观和布局。在CSS中,我们可以通过一些属性来控制文本的显示效果,例如:字体大小、颜色、粗细、间距等等。但是,当文本长度超过了容器的宽度时,文本就会自动换行。这时候,如果我们希望显示的文本只占一行,并且超出部分自动省略,则可以使用CSS中的text-overflow属性。

p {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
} 

上面的代码中,我们给p标签添加了三个属性,分别是:white-space、overflow、text-overflow。其中,white-space用于禁止文本的换行,overflow用于隐藏文本溢出的部分,text-overflow则用于表示超出部分用省略号表示。

在实际应用中,我们可以根据需要来设置容器的宽度和高度,例如:

.container {
  width: 200px; /* 容器宽度 */
  height: 20px; /* 容器高度 */
  border: 1px solid #ccc; /* 容器边框 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
} 

上面的代码中,我们给容器设置了宽度和高度,并且添加了边框,使其看起来更加美观。同时,我们也将overflow和text-overflow属性应用到了容器中。

总之,使用text-overflow属性可以让我们更加灵活地控制文本的显示效果,达到更好的展示效果。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css两行溢出自动省略

粉丝

0

关注

0

收藏

0

已有0次打赏