웹5/CSS3
CSS 말줄임, 점처리, 생략처리 방법
커드만
2016. 4. 7. 06:00
작은 공간에서 긴문장을 한 줄에 표현하지 못할때 쓸 수 있는 방법입니다.
개발단에서 글자를 바이트 단위로 끊어 표현할 수 있지만 css로도 말줄임을 표현할 수 있으니
방법을 알려드리도록 하겠습니다.
1 2 3 4 5 6 7 8 | .box{ width:300px; overflow:hidden; //width 값에 벗어나면 숨김 text-overflow:ellipsis; //점처리 white-space:nowrap; //글씨가 길어도 아래로 떨어지지 않게 처리 } | cs |
여기서 주의 할점은 꼭 width값이 존재해야 합니다. 그래야 점처리가 효과적으로 나타날 수 있습니다.
위의 기술은 한줄문장을 말줄임표시 처리를 한다면
2줄에서 또는 3줄에서 자기가 원하는 라인번째에 말줄임을 할 수 있는 CSS 기술이 있습니다.
1 2 3 4 5 6 7 8 9 | .box{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*여기서 라인을 선택 하여 말 줄임*/ -webkit-box-orient: vertical; } | cs |
이제 자신이 원하는 라인의 말줄임 처리도 문제 없을거라는 생각이 듭니다. :)