Web实现：单行文本超出省略实例

最新推荐文章于 2024-05-22 14:36:42 发布

jasmyn518

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量166

点赞数

分类专栏： CSS 笔记 HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/jasmyn518/article/details/124056046

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

旧版微博关注列表中的关注的图像和昵称。头像在上，昵称在下，昵称太长时需要省略。
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;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：单行文本超出省略实例

旧版微博关注列表中的关注的图像和昵称。头像在上，昵称在下，昵称太长时需要省略。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-
复制链接

扫一扫