HTML/CSS

CSS 글자를 한줄로 나오게하기

제한된 사이즈로 된 블럭안에 글자를 한줄만 출력하고 싶을때가 있습니다.
과거에는 프로그램으로 x개의 글자까지 표시하고 그 뒤의 글자는 잘라버렸지만 웹접근성에 문제가 있어서 그대로 출력을 하고 css로 한줄로만 출력할 수 있습니다.
예) 가나다라마바사...

사용 조건은 가로 사이즈가 잡혀 있어야합니다.

- html

<p class="text">
홍콩(향항, 중국어: 香港, 병음: Xi?ngg?ng 샹강[*], 영어: Hong Kong, 광둥어: 香港 He?ng g?ng 횡공)은 중화인민공화국의 남동부에 있는 특별행정구이다. 정식 명칭은 중화인민공화국 홍콩(샹강) 특별행정구(중국어 간체: 中?人民共和?香港特?行政?, 정체: 中華人民共和國澳門特別行政區, 병음: Zh?nghu? R?nm?n G?ngh?gu? Xi?ngg?ng T?bi? X?ngzh?ngq? 중화런민궁허궈 샹강 터볘 싱정취[*], 영어: Hong Kong Special Administrative Region of the People's Republic of China 홍콩 스페셜 어드미니스트레이티브 리전 오브 더 피플스 리퍼블릭 오브 차이나[*])이다. 홍콩 섬(중국어 정체: 香港島)과 주룽(중국어 정체: 九龍)과 신제(新界) 및 그 밖의 230개의 부속 도서로 구성되어 있다.
</p>


- css

.text {
width: 400px; padding: 15px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


- 데모
http://codepen.io/anon/pen/fhloH
게시글 공유 URL복사
댓글작성

열기 닫기

댓글작성

top