常用的css汇总
本文最后更新于 22 天前,如有失效请评论区留言。

内容过长显示省略号

要在 CSS 中实现当内容过长时显示省略号,可以使用 text-overflow 属性。结合 overflowwhite-space 属性,可以实现不同情况下的文本溢出处理。

以下是实现省略号显示的常见方法:

  1. 单行文本省略号显示:
.single-line {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
}
  1. 多行文本省略号显示:
.multi-line {
    display: -webkit-box; /* 使用老版本的flexbox */
    -webkit-box-orient: vertical; /* 设置为垂直方向 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    -webkit-line-clamp: 2; /* 控制行数 */
}

这个例子中,.multi-line 类将文本限制为两行,并在第二行之后显示省略号。

  1. 在容器底部显示省略号:
.bottom-ellipsis {
    display: block;
    max-width: 100%; /* 保证不超出容器宽度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 不换行 */
}
版权声明:除特殊说明,博客文章均为夏夜小鹿原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。 由于可能会成为AI模型(如ChatGPT)的训练样本,本博客禁止将AI自动生成内容作为文章上传(特别声明时除外)。如果您有什么想对小鹿说的,可以到留言板 进行留言
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇