반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 CSS Text wrapping (Google)

2012. 2. 4. 05:06 | Posted by 솔웅


오늘은 Text Wrapping 에 대해 살펴 보겠습니다.
이 기능은 Internet Explore 를 제외한 모든 브라우저에서 작동 합니다.

단 아래 슬라이드 바는 Firefox에서는 숫자를 넣는 Textbox로 나옵니다.
슬라이드 바 기능을 Firefox에서 지원을 안하나 봅니다.

You can ellipse below texts with control slide bar.
If you have Firefox browser text box will be displayed instead of the slide bar then just input any number between 1~100 then enter to ellipse those texts.
This function is working on all browsers except Internet Explore.


CSS

Text wrapping

div {
  text-overflow: ellipsis;
}
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Play with the slider on this pages!


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O) -not slide bar-

You can download source code file below.
아래 원본 파일을 다운 받아서 실행해 보세요.


반응형

Comment

이전 1 2 3 4 5 6 7 ··· 41 다음