Vue 프로젝트 영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리

 

Vue 프로젝트 영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리

 

1. /src/components/MovieItem.vue 수정

- 포스터에 마우스를 올리면 hover 효과

- 텍스트 타이틀 말줄임

... 생략

<style lang="scss" scoped>
@import "~/scss/main";

.movie {
  ... 생략
  &:hover::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 6px solid $primary;
  }
  .info {
    ... 생략
    backdrop-filter: blur(10px);
    .year {
      color: $primary;
    }
    .title {
      color: $white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>

 

결과

 

---

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

text-overflow - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

backdrop-filter - CSS: Cascading Style Sheets | MDN