css不换号省略号

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

CSS(Cascading Style Sheets)是网页设计中不可或缺的一部分,它可以控制网页的外观和排版。其中,不换号和省略号是在排版中非常常见的效果。不换号指的是在一行文字中,不将过长的单词或

CSS(Cascading Style Sheets)是网页设计中不可或缺的一部分,它可以控制网页的外观和排版。其中,不换号和省略号是在排版中非常常见的效果。不换号指的是在一行文字中,不将过长的单词或过长的连续字符断开换行,而是保留在同一行。省略号则是将文字缩略显示,只保留开头和结尾的部分,用省略号代替中间文字。

示例代码:
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 

以上是CSS实现不换号和省略号的基本语法。其中,使用了white-space属性来设置为不换行;使用了overflow属性来设置超出部分的隐藏;最后使用了text-overflow属性来设置省略号的显示。

需要注意的是,以上CSS只适用于单行文字,对于多行文字,需要结合其他属性一起使用。

示例代码:
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
} 

以上代码将使用display属性的-webkit-box值,将文本包含在一个块级元素中,实现多行文字的显示,并设置了-webkit-line-clamp和-webkit-box-orient属性,来控制显示3行,并垂直显示。

CSS的不换号和省略号可以让网页排版更加美观和舒适。但是在制作过程中,需要根据实际情况进行灵活调整,以达到最佳效果。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css不换号省略号

粉丝

0

关注

0

收藏

0

已有0次打赏