div 박스나 a 하이퍼링크를 걸다보면 제목이나 내용이 설정한 줄을 넘어 갈 때가 있다.
php에서야 임의 간격으로 잘라도 한 방법이겠지만 한글과 영어 숫자가 적혀있을때는 string 처리를 별도로 해야 한다.
css로 몇가지 문법을 넣어서 해결을 해보자.
width/height 어느것이라도 고정값이 있으면 수월해 진다.
모바일에서 보이는 크기나 태블릿, pc에서 보이는 크기는 당연히 다르다.
우선 다음줄로 개행이 되는 것을 막아야 하기 때문에 white-space:nowrap을 준다.
그 뒤 넘치는것을 안보이게 하기 위해 해당 엘리먼트에 overflow:hidden; 추가
text-overflow:ellipsis를 주고 마무리 한다.
끝쪽에 ...으로 대체 된다.
참고로 text-overflow를 적용시 display가 block이여야 한다. 혹은 inline-block이나.
text-overflow에 쓸 수 있는 속성은 ellipsis 와 더불어 clip(글자를 자름), string(잘려진 문자를 지정한 문자로 표기 하여 대체 됨)
등이 있다.