[css] 말줄임 표시 방법 , 1줄 or 2줄 일때

 

 

말줄임표는 정말 자주 쓰입니다.

스크립트로 처리하기도 하지만

Css로도 처리가 가능합니다.

 

사용된 css 

- white-space:nowrap;   자동줄바꿈방지 
- overflow-x:hidden; 넘어가는 것 안보이게 
- text-overflow:ellipsis;  넘어서 안보이는 텍스트 ... 표시 

*주의 : width값 지정 필요 

 

html

<div class="wrap">
  <p>텍스트가 길어지면 말줄임표가 자동으로 생깁니다.</p>
</div>


 <div class="mulit-line-ellipsis">
 텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다.
  </div>

 

css

body{
  color:#555;
}
.wrap{
  display: flex;
  align-items: center;
  height: 200px;
  justify-content: center;
}
p {
  padding:10px;
  font-size:15px;
  width:200px;
  border:1px solid #ddd;
  white-space:nowrap;
  overflow-x:hidden;
  /* 넘쳐서 숨겨지는 텍스트 ... 처리 */
  text-overflow:ellipsis;
}

.mulit-line-ellipsis {
  border: 1px solid #ddd;
  width: calc(191px - 1rem);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  line-height: 1.2rem;
  max-height: 3.6rem;
  word-break: break-all;
  width: 200px;
}

.mulit-line-ellipsis:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.mulit-line-ellipsis:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
}

 

result