Web实现：单行文本超出省略实例_头像超出省略-优快云博客

本文链接：https://blog.youkuaiyun.com/jasmyn518/article/details/124056046

本文介绍如何使用HTML和CSS实现微博关注列表中头像昵称的省略显示，关注列表以用户头像和昵称形式呈现，当昵称过长时，通过CSS技巧实现文本溢出省略并保持美观。

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

旧版微博关注列表中的关注的图像和昵称。头像在上，昵称在下，昵称太长时需要省略。
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>单行文本溢出省略</title>
  </head>
  <body>
    <div class="user">
      <div class="avatar-tag">
        <div class="avatar"></div>
        <div class="tag"></div>
      </div>
      <div class="name">BIGBIG张大大</div>
    </div>
  </body>
</html>

CSS部分：

.user {
  width: 50px;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  margin: 0 auto;
  box-sizing: content-box;
}
.user .avatar-tag {
  width: 50px;
  height: 50px;
  position: relative;
  margin-bottom: 9px;
}
.user .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(./images/focus-avatar-4.png) no-repeat center/contain;
}
.user .tag {
  position: absolute;
  bottom: -5px;
  right: -1px;
  width: 24px;
  height: 24px;
  background: url(./images/vip-circle.png) no-repeat center/contain;
}
.user .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #333;
  text-align: center;
}