# 새로운 라이트박스에서 긴 이미지 제목이 넘치는 문제

**URL:** https://meta.discourse.org/t/long-image-title-overflow-issue-in-new-lightbox/273259
**Category:** UX
**Created:** [7월 30, 2023, 4:32오전 UTC](https://meta.discourse.org/t/long-image-title-overflow-issue-in-new-lightbox/273259 "2023-07-30T04:32:38Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [7월 30, 2023, 4:32오전 UTC](https://meta.discourse.org/t/long-image-title-overflow-issue-in-new-lightbox/273259/1 "2023-07-30T04:32:38Z")

</div>

이전에 이미 질문이 있었는지 확실하지 않습니다. 새로운 라이트박스가 매우 긴 이미지 제목을 처리하지 못합니다. 이로 인해 사용자가 오른쪽 위 버튼을 클릭할 수 없습니다.

 ![Screenshot_2023-07-30-12-26-20-913_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/1/9/b/19b11dcc6ce63f27e75e453e17c88e7aa8e8d5b8.jpeg)

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/2/4/624d4cbe196103fb978b2c1e2c945a0e45a84b31.jpeg)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 30, 2023, 7:18오전 UTC](https://meta.discourse.org/t/long-image-title-overflow-issue-in-new-lightbox/273259/2 "2023-07-30T07:18:29Z")

</div>

안녕하세요 👋

새로운 라이트박스는 아직 실험 단계이지만, UX 정합성 관련 조정을 몇 가지 했습니다.

캐러셀 이미지 치수 및 제목에 대한 수정 사항이 포함되어 있습니다.

```scss
.d-lightbox {
   &__carousel-item { 
     object-fit: cover;
   } 
   .d-lightbox__main-title { 
     margin-left: 0.5rem; 
     max-width: 100%; 
   } 
   &.has-expanded-title { 
     .d-lightbox { 
       &__content { 
         gap: 2em 0; 
       } 
       &__main-title { 
         max-height: 100px; 
         overflow-y: auto; 
         overflow-wrap: break-word; 
         word-wrap: break-word; 
         word-break: break-all; 
         word-break: break-word; 
         -webkit-hyphens: auto; 
         hyphens: auto;
       } 
     } 
   } 
   &:not(.has-expanded-title) { 
     .d-lightbox { 
       &__main-title { 
         @include line-clamp(1); 
       } 
     } 
   } 
 }

```