CSS / 문자가 두줄 이상되면 ...으로 처리하기

제목이 두줄이 되면 한줄로 표현해주고 ...으로 처리해주는 CSS를 적용해줬다.

---

아래와 같이 게시판을 작성하면 미리보기 해주는 기능을 만들었다.
제목이 길어지면 두줄이 되면서 높이가 맞지 않아.

---

---

<div class="card-body">
  <div class="justify-content-between align-items-center">
    <p class="card-text title">제목이 두줄이 넘으면 한줄로 표시됩니다 한줄...으로 표시됩니다.</p>
    <small class="text-muted">행사시작일~행사종료일</small>
  </div>	
</div>

위의 <p class="title">태그에 

아래와 같이 CSS를 적용하면

<style>
  .title{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>

두줄이 이상의 제목은 한줄 + ... 으로 변경된다.

---

반응형 웹에서도 아래와 같이 잘 적용이 되는 것을 확인 할 수 있다.

 

 

<table>

에서의 말줄임 https://bonggugu.tistory.com/16

table태그에서 말줄임 사용하기