多余文字隐藏css效果

最新推荐文章于 2025-02-25 11:49:18 发布

小佳的笔记

最新推荐文章于 2025-02-25 11:49:18 发布

阅读量353

点赞数 1

文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_45234274/article/details/115356774

版权

本文介绍了如何使用CSS样式实现元素宽度固定且文字超出部分隐藏，同时用省略号表示被隐藏的内容。主要涉及`display:block`、`width`、`overflow:hidden`、`text-overflow:ellipsis`和`white-space:nowrap`等属性的使用，适用于前端开发中对文本显示的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 display: block;

  /*设置宽度*/
  width: 100px;

  /*若文字长度超过width，则隐藏文字*/
  overflow: hidden;

  /*超过的部分用 ... 显示*/
  text-overflow: ellipsis;

  /*取消文字自动换行，如果不加则文字会自动换行使得高度改变*/
  white-space: nowrap;

在这里插入图片描述