CSS 用户登录图标与用户名样式

AvatarGiser

于 2021-05-06 15:03:24 发布

阅读量1.5k

点赞数 2

分类专栏： CSS 小知识点文章标签： css

本文链接：https://blog.csdn.net/sinat_31213021/article/details/116453985

版权

CSS 小知识点专栏收录该内容

35 篇文章 3 订阅

订阅专栏

HTML

<div class="login-user">
    <img src="@images/user.png" />
    <div class="user-name">admin</div>
</div>

CSS

注意 class="user-name" 中设置了用户名宽度，超出时用 ... 省略号代替

.login-user {
    height: 54px;
    line-height: 54px;
    margin-right: 3px;
    color: white;    
}
img {
    width: 28px;
    height: 28px;
    cursor: pointer;
    vertical-align: middle;
}
.user-name {
    display:inline-block;
    cursor: default;
    margin: 0 5px;
    width: 50px;
    overflow: hidden;//隐藏溢出部分
    text-overflow: ellipsis;//超出用省略号
    white-space: nowrap;//不换行，强制在一行
    vertical-align: middle;
    font-size: 14px;
}