넘치는 텍스트 줄이기(말 줄임표)

문제

카드를 여러개 만들면서 따로 설정을 하지 않아서 긴 content의 길이에 맞춰 높이가 결정되고,

그 card를 기준으로 다음 카드의 높이가 결정된다

 

그래서 카드가 같은 높이를 가지고, 카드를 벗어나는 글들은 ... (줄임) 표시를 하도록 수정하려한다

text-overflow면 해결될 줄 알았는데 안됨! ㅠ

문제

아래는 위 화면의 html, css이다 

<div class="card" id="영화id">
    <img src="이미지" alt="영화이미지" class="movieImg">
    <h2 class="movieTitle">Dune</h2>
    <p class="movieContent">설명글...</p>
</div>

.movieContent {
    overflow: hidden;
    text-overflow: ellipsis; // 작동 안함 🥲
}

 

말 줄임표 사용 방법을 2가지 찾았다

1. text-overflow: ellipsis

텍스트가 요소의 너비를 초과할 때 말 줄임표(...)를 사용한다

text-overflow: ellipsis를 적용하기 위해서는 몇 가지 조건을 모두 충족해야한다 

1. overflow : hidden
2. white-space : nowrap  // 해당 속성은 텍스트를 "한 줄"로 표시한다
3. 요소의 너비가 고정되어있어야 한다 (block 요소)

조건처럼 요소를 block으로 설정하고, 강제적으로 한 줄을 만들어 해당 요소를 벗어나는 텍스트를 줄여준다

하지만 의도했던 바가 아님

 

2. display: -webkit-box 🎊 🎊 

다중 줄 텍스트를 지정한 줄 수만큼 표시하고, 나머지는 말 줄임표(...)를 표시하는 속성이다

웹킷(WebKit) 기반 브라우저에서 동작한다

.movieContent {
    overflow: hidden; // 텍스트 요소 초과시 숨김
    display: -webkit-box; // 요소를 웹킷 박스로 표시
    -webkit-line-clamp: 3; // 3번째 줄까지만 표시하고 나머지는 말 줄임표(...)
    -webkit-box-orient: vertical; // 웹킷 박스 방향을 수직으로 설정
}

해결~!

 

결론

한 줄을 줄이기 위해서는 text-oveflow

여러 줄을 줄이거나, 특정 줄 수만 보이고 싶을 때는 -webkit-line-clamp