# 카테고리 드롭다운이 긴 이름에서 잘리지 않음...

**URL:** https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139
**Category:** UX
**Tags:** completed
**Created:** [5월 25, 2023, 2:54오전 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139 "2023-05-25T02:54:17Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 25, 2023, 2:54오전 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/1 "2023-05-25T02:54:17Z")

</div>

카테고리 드롭다운 셀렉터의 표시 속성이 긴 카테고리 이름에서 줄바꿈이나 잘라내기(…)가 되지 않습니다.

 ![IMG_3375](https://global.discourse-cdn.com/meta/original/4X/d/e/1/de19f2d6d005a5a7262bc303ff238402bdc9549e.jpeg)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5월 25, 2023, 8:29오전 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/2 "2023-05-25T08:29:47Z")

</div>

같은 시각적 효과를 유지하기 위해 너비를 변경하지 않으면서, 여기에 생략호를 추가하는 것이 해결책이 될 수 있습니다:

```css
.name > .badge-wrapper .badge-category {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/3/3/1/3313510bc0848d735ce91c1fc55564f67cb2daee.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 25, 2023, 1:08오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/3 "2023-05-25T13:08:01Z")

</div>

감사합니다. CSS로 처리하려고 했었는데, 아직 시도조차 하지 못했어요. 직접 알아내려다 시간을 낭비할 뻔했는데, 정말 시간 절약이 됐네요! 🙂 잘하셨어요 👏

---

<div class="post-metadata">

### Author: ![isaac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/isaac/32/235758_2.png) [@isaac](https://meta.discourse.org/u/isaac)
#### Post date: [5월 25, 2023, 2:41오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/4 "2023-05-25T14:41:04Z")

</div>

@Lilly 안전 모드에서는 이런 문제가 발생하나요? 메타의 [더 긴 카테고리](https://meta.discourse.org/c/support-program/105)를 확인해 보니 정상적으로 표시됩니다!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 25, 2023, 2:42오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/5 "2023-05-25T14:42:48Z")

</div>

안전 모드에서 발생하는 것을 확인했습니다

 ![IMG_3378](https://global.discourse-cdn.com/meta/original/4X/f/e/0/fe09c34d1ff6b6f7e180e9a5b4337a0410fa9b81.jpeg)

@isaac - 스크린샷을 추가했습니다

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5월 25, 2023, 2:51오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/6 "2023-05-25T14:51:44Z")

</div>

확인해 보지는 않았는데, 이미 CSS 코드가 있네요. 제 실수였습니다.

하지만 해당 코드는 _불릿_이 있는 카테고리 이름을 선택하는 것으로 보이는데, 릴리의 디스커스에는 불릿이 없습니다.

메타 사이트:

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/f/c/cfcc6e4a892afe47791f39fd378a10c19be9f3bd.png)

릴리:

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/c/e/4ce9c98e22461c6ec19badf2b04f8735f8d18b96.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 25, 2023, 2:53오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/7 "2023-05-25T14:53:40Z")

</div>

배지 래퍼에서 내 글리프를 제거했습니다. 하지만 당신의 코드는 정상적으로 작동했습니다.

카테고리 글리프에 대한 설정이 있다는 것은 알지만, 다른 테마에서 글리프가 어디에 표시되는지 세밀하게 제어하는 것을 선호합니다.

---

<div class="post-metadata">

### Author: ![isaac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/isaac/32/235758_2.png) [@isaac](https://meta.discourse.org/u/isaac)
#### Post date: [5월 25, 2023, 3:00오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/8 "2023-05-25T15:00:51Z")

</div>

> [@Lilly](#):
>
> 배지 래퍼에서 내 불릿을 제거했습니다.

이것이 문제의 원인이라고 생각하거나, 적어도 부정적인 영향을 미치고 있을 수 있습니다. 최신 버전의 Discourse에서는 다음과 같습니다:

 ![Screenshot 2023-05-25 at 10.00.04 AM](https://global.discourse-cdn.com/meta/original/4X/7/1/9/719f65e71d27985083f0fdf5155786cb9557425a.png)  
 ![Screenshot 2023-05-25 at 10.00.09 AM](https://global.discourse-cdn.com/meta/original/4X/8/5/d/85dbdc48d378e422aa1553c3defed0b8e0672a2f.png)

> [@Lilly](#):
>
> 하지만 당신의 코드는 잘 작동했습니다.

 ![Screenshot 2023-05-25 at 9.57.46 AM](https://global.discourse-cdn.com/meta/original/4X/8/4/b/84bf992ec3ff80ca67d6e2d4a37575c579afdcab.png)

드롭다운 옵션이 이전에 잘렸던 적이 있나요?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 25, 2023, 3:07오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/9 "2023-05-25T15:07:06Z")

</div>

@isaac 배지 래퍼 숨김 코드와 @Arkshine님이 제공하신 생략호(…) 코드도 제거했고, 현재 `admin-settings- category style`을 none(배지 없음)으로 설정하여 안전 모드에서 실행 중입니다. 그런데도 여전히 위 안전 모드 스크린샷과 동일한 문제가 발생합니다. 안전 모드에서는 컴포넌트가 영향을 미치지 않아야 합니다.

---

<div class="post-metadata">

### Author: ![isaac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/isaac/32/235758_2.png) [@isaac](https://meta.discourse.org/u/isaac)
#### Post date: [5월 25, 2023, 3:09오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/10 "2023-05-25T15:09:10Z")

</div>

@Lilly 감사합니다, 네, 이제 문제를 재현할 수 있습니다! 감사합니다!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 25, 2023, 3:24오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/11 "2023-05-25T15:24:50Z")

</div>

참고로, 이는 기능적 또는 치명적인 문제가 아니라 명확하게 UI 외관에만 영향을 미치는 문제이기 때문에 버그가 아닌 UX 섹션에 게시했습니다. 또한, 이는 매우 긴 카테고리 이름의 경우에 한해 해당되며, 이후 발견한 바로는 배지 래퍼의 불릿(점)에도 영향을 미칩니다.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [5월 26, 2023, 1:56오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/12 "2023-05-26T13:56:22Z")

</div>

여기서 수정되었습니다:

> <https://github.com/discourse/discourse/commit/9268bb92bdcc7d6ec62e5506112542d89e836069>

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 26, 2023, 1:59오후 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/13 "2023-05-26T13:59:38Z")

</div>

@awesomerobot 정말 최고야 🤩 고마워!

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [5월 27, 2023, 7:00오전 UTC](https://meta.discourse.org/t/category-drop-down-not-truncating-for-longer-category-names/266139/14 "2023-05-27T07:00:22Z")

</div>

이 주제는 15시간 후 자동으로 닫혔습니다. 더 이상 답변을 남길 수 없습니다.
