small steps/1일 1코딩 - 코딩을 내 몸처럼
[1일1코딩][CSS] text-overflow + over-flow
꿈꾸는개발자maker
2022. 5. 4. 20:26
728x90
overflow: hidden; ← 넘어간 내용을 감춘다.
text-overflow: ellipsis; ← 넘어간 내용을 ... 처리해준다
.cardBoxText{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="cardBoxText">
<div class="">
<strong class="d-inline-block mb-lg-1 text-success reviewCategory">중식</strong>
<h5 class="card-title cardTitle">중화요리 팔공</h5>
<p class="card-text mb-1 reviewDate">22.02.22 | 조회수 50회</p>
<p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
<p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
<p class="card-text reviewNormal">푸짐한 양과 아낌없는 재료
푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료푸짐한 양과 아낌없는 재료
</p>
<!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
</div>
</div>
728x90
반응형