# 在帖子中显示个人资料标题

**URL:** https://meta.discourse.org/t/show-profile-headline-in-the-posts/257917
**Category:** Development
**Created:** [2023年三月13日 07:29 UTC](https://meta.discourse.org/t/show-profile-headline-in-the-posts/257917 "2023-03-13T07:29:25Z")
**Posts on this page:** 1
**Showing post:** 12

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年三月13日 13:24 UTC](https://meta.discourse.org/t/show-profile-headline-in-the-posts/257917/12 "2023-03-13T13:24:02Z")

</div>

谢谢你的信息 🙂

如果你启用了 **在用户体验中优先显示用户名** ，那么当用户的用户名和全名相同时，用户名将显示在每篇帖子中。  
而且，如果你只想用 CSS 来隐藏用户名，你将无法做到，因为你无法定位前面的元素。

例如，你会有两篇帖子显示：

1. 用户名

2. 用户名 全名

你将无法只隐藏那些全名与用户名不同的用户的用户名，因为用户名显示在全名 **之前** 。

这有点复杂，难以解释 😅

所以，如果你想要一个纯 CSS 的解决方案，你需要禁用 **在用户体验中优先显示用户名** 并使用以下 CSS：

```scss
.names {
    .full-name +.username {
        display: none;
    }
}

```

至于名字下方的头衔，你可以使用这个更新后的 CSS：

```scss
.topic-meta-data .names {
    flex-wrap: wrap;
    .user-title {
        width: 100%;
        order: 1;
    }
}

```

`order: 1;` 可以防止用户的状态表情符号出现在头衔旁边，并将其保留在全名旁边：

如果我将所有这些 CSS 结合起来，结果如下。

之前：

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/1/f/81fe23920c378fad71f87d5e446956ee20753664.png)

```css
.topic-meta-data .names {
    flex-wrap: wrap;
    .full-name +.username {
        display: none;
    }
    .user-title {
        width: 100%;
        order: 1;
    }
}

```

之后：

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/8/6/28600a847d76497603d7f24a31dcbc7e3b283bf7.png)

---

_[View the full topic](https://meta.discourse.org/t/show-profile-headline-in-the-posts/257917)._