# 链接太多导致水平溢出

**URL:** https://meta.discourse.org/t/too-many-links-cause-horizontal-overflow/271246
**Category:** UX
**Tags:** custom-header-links
**Created:** [2023年一月3日 11:05 UTC](https://meta.discourse.org/t/too-many-links-cause-horizontal-overflow/271246 "2023-01-03T11:05:20Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Discoursenaut](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@Discoursenaut](https://meta.discourse.org/u/Discoursenaut)
#### Post date: [2023年一月3日 11:05 UTC](https://meta.discourse.org/t/too-many-links-cause-horizontal-overflow/271246/1 "2023-01-03T11:05:20Z")

</div>

当水平屏幕空间低于某个阈值时，是否有可能实现断点，以便自定义标题链接消失？目前它仍然显示在屏幕上，并且在您缩小到某个阈值内的屏幕时会被截断。

---

<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年七月11日 15:00 UTC](https://meta.discourse.org/t/too-many-links-cause-horizontal-overflow/271246/2 "2023-07-11T15:00:54Z")

</div>

如果组件中没有直接提供，那么在自定义主题/组件中使用 CSS 可以轻松实现，特别是因为每个链接都有一个唯一的类名。

例如，在定义断点处隐藏第一个链接。

```scss
.most-liked-custom-header-links {
    @include breakpoint('extra-large') {
        display: none;
    }
}

```

您可以在此处找到断点列表：

> <https://github.com/discourse/discourse/blob/83352e93ffb2aafd2af30bfb7cc4b267a568f425/app/assets/stylesheets/common/foundation/mixins.scss#L10>