Loading...

CSS로 말줄임 효과내기

스크립트를 사용하지 않더라도 브라우저에서는 말 줄임을 css로 가능하게 지원해준다.아래는 지원여부에 따라 테스트해본 결과이다.

test text. test text. test text. test text. test text. test text. test text.
.selector { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } css의 네가지 규칙만 넣어주면, IE6~10, safari, firefox, chrome 모두 잘 나왔다. (만약 부모노드에서 width값과 overflow: hidden이 걸려있으면 텍스트를 담은 태그에서는 생략해도 관계없다...

2013.05.13 16:13

IE10에서 네이버 스마트 에디터 자바스크립트 오류

예전에 인터넷 익스플로러 9 (IE 9)에서 네이버 스마트 에디터 오류로 인하여 에디터 편집창이 활성화되지 않는 버그가 있어 코드를 아래와 같이 수정하였다. Husky.SE_Basic.js 의 283번째 줄 부근?? 아마.. 이 근처인듯하다. if(this.bIE){button=document.createElement("

자동 개행

word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-break:break-all; FF억지춘향 줄바꿈 / Dev html에서 한 문장의 줄이 길어지면 보통은 자동으로 줄바꿈해주지 않는다. IE(5.5부터인가?)의 경우는 css에 "word-wrap:break-word;"를 써주면 조금 어색한 곳이라도 무조건 줄바꿈시켜준다. 문제는 Firefox!! 여차저차 ..

CSS Hack

브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구 조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다. Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은..

디자인 템플릿

소개 :무료로 사용이 가능한 사이트 디자인 템플릿을 공유해 주는 해외 사이트입니다국내의 그래픽 칠갑이나 빼곡한 리스트의 경향과 대조적으로 한가로운 분위기네요?http://www.opensourcetemplates.org/http://www.templateworld.com/free_templates.htmlhttp://www.oswd.org/http://www.free-css-templates.com/free-templates.htmlhttp://www.templatesbox.com/http://www.freelayouts.com/websiteshttp://www.ex-designz.net/template/tempcat.asp?cat_id=13http://www.openwebdesign.org/browse..

[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시

스크랩 http://phpschool.com/link/tipntech/74887