css两行控制字数

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

CSS是网页设计中必不可少的一部分,其中包含很多实用的功能,其中有一种可以通过仅仅两行代码就可以控制文本的字数,非常方便。下面就来介绍一下怎么通过CSS来实现这个功能。p { white-space:

CSS是网页设计中必不可少的一部分,其中包含很多实用的功能,其中有一种可以通过仅仅两行代码就可以控制文本的字数,非常方便。下面就来介绍一下怎么通过CSS来实现这个功能。

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

在上面的代码中,可以看到一共使用了三个属性。首先,我们设置了“white-space: nowrap;”这一属性,它的作用是让文本在一行内显示,不会自动换行到下一行。其次,我们使用了“overflow: hidden;”这个属性,它的作用是让超出宽度的文字隐藏。最后,我们用“text-overflow: ellipsis;”来代替隐藏的文字。这个属性可以在隐藏的文字后面添加省略号。

基本上就是这样,只需要这三个CSS属性就可以轻松地控制文本的字数了。当然,如果你想要根据需要来调整文字的长度,也可以适当修改代码中的“white-space: nowrap;”这一属性,让它允许自动换行到下一行。希望这些信息对您有所帮助,有关问题欢迎在下面留言。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css两行控制字数

粉丝

0

关注

0

收藏

0

已有0次打赏