CSS ) 글자의 overflow + div의 title 속성

이렇게 고쳤어요

 

이렇게 글자가 더 길어서 삐져나오는 경우..

 

1. text-overflow 적용

<div className={cx('map_title_box')} title={name}>
    <strong className={cx('map_title')}>{name}</strong>
</div>

.map_tit_box{
  width: 210px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;  	 
  white-space: nowrap; 		
  word-break: break-all; 
}

 

이렇게 수정해주었다.

 

중요한건

{
  width : 200px; 
  display : block;
  overflow : hidden;
  text-overflow: ellipsis;  	 
  white-space: nowrap; 		
}

부모요소가 display 속성이 block 혹은 inline-block 이여야함.

text-overflow 속성은 block 형태에만 적용되기 때문.

 

 

2. div 의 title 속성 사용

잘린 글자에 마우스 오버하면 전체 텍스트가 나오게 하는 법.

img 는 alt 를 사용하고

div 는 title 을 사용하면 된다.

 

 

 

 

 

 

 

 

참고블로그

https://devbirdfeet.tistory.com/140

CSS - 텍스트가 넘칠때 생략하기

 

https://bbaksae.tistory.com/25

alt속성과 title 속성 비교