연속되는 영문,숫자 CSS 줄바꿈



웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] 연속되는 영문,숫자 CSS 줄바꿈

2018.07.06
동일한 영문/숫자를 연속적으로 길게 입력할 경우, 디자인이 깨질 수 있다.
그같은 css의 해당 스타일에 아래와 같이 추가한다.

word-wrap:break-word;word-break:break-all;

하지만 파이어폭스는
동일한 영문/숫자를 연속적으로 길게 입력할 경우,
위의 스타일속성으로는 해결할 수 없다.
그때는 아래와 같은 속성을 더 추가해주어야 한다.

overflow:hidden; //초과되는 텍스트는 감춰버린다.
overflow:scroll; //스크롤을 걸어준다(모든 텍스트에..)
overflow:auto; //초과되는 텍스트에만 스크롤을 걸어준다.

단, overflow속성을 사용할때 주의할점은 width가 정확하게 지정되어야한다.
100% 등으로 지정되면 처리가 안되고 700px 처럼 수치를 정확하게 입력해주어야한다.
해당 태그가 아니라 상위태그에서라도 수치는 명확하게 입력되어져야한다..


이 포스트 공유하기

글수정  글삭제 전체목록